Horizontales Scroll-HTML

[vish234]

Wie würde ich also einer untergeordneten Tabelle innerhalb einer Tabelle eine horizontale Bildlaufleiste hinzufügen? Ich kann der Haupttabelle mit dem folgenden Code eine horizontale Bildlaufleiste hinzufügen, aber dieselben Attribute gelten nicht für die untergeordnete Tabelle.

<style> table, th, td {border: 1px solid black;border-collapse: collapse;} th, td {padding: 5px;}
</style>
<div style="overflow-x: auto;overflow-y:hidden;">
<table>
  <tr>
    <th>Old_records</th>
    <td> 3 </td>
  </tr>
  <tr>
    <th>Records_fetched</th>
    <td>10</td>
  </tr>
  <tr>
    <th>NEw_records</th>
    <td>80</td>
  </tr>
  <tr>
    <th><p><b>Inside Table</b></p></th>
    <td>
        <div style="overflow-x: auto;overflow-y:hidden;">
        <table>
        <thead>
          <tr>
            <th>Header1</th>
            <th>Header2</th>
            <th>Header3</th>
            <th>Header4</th>
            <th>Header5</th>
            <th>Header6</th>
            <th>Header7</th>
            <th>Header8</th>
            <th>Header9</th>
            <th>Header10</th>
            <th>Header11</th>
            <th>Header12</th>
            <th>Header13</th>
            <th>Header14</th>
            <th>Header15</th>
            <th>Header16</th>
            <th>Header17</th>
            <th>Header18</th>
            <th>Header19</th>
            <th>Header20</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Data1</td>
            <td>Data2</td>
            <td>Data3</td>
            <td>Data4</td>
            <td>Data5</td>
            <td>Data6</td>
            <td>Data7</td>
            <td>Data8</td>
            <td>Data9</td>
            <td>Data10</td>
            <td>Data11</td>
            <td>Data12</td>
            <td>Data13</td>
            <td>Data14</td>
            <td>Data15</td>
            <td>Data16</td>
            <td>Data17</td>
            <td>Data18</td>
            <td>Data19</td>
            <td>Data20</td>
          </tr>
        </tbody>
        </table>
        </div>
    </td>
  </tr>
  <tr>
    <th>Old_records</th>
    <td> 32 </td>
  </tr>
  <tr>
    <th>Old_records</th>
    <td> 32 </td>
  </tr>
  <tr>
    <th>Old_records</th>
    <td> 32 </td>
  </tr>
  <tr>
    <th>Old_records</th>
    <td> 32 </td>
  </tr>
  <tr>
    <th>Old_records</th>
    <td> 32 </td>
  </tr>
</table>
</div>

Gibt es eine Methode, um einer untergeordneten Tabelle, die in einer bestimmten Zeile der primären Tabelle vorhanden ist, eine horizontale Bildlaufleiste hinzuzufügen?

 

[mihe7]

Gib dem div eine Breite.

 

[faustjonson]

<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
.scrollable {
overflow-x: auto;
overflow-y: hidden;
}
</style>

<div style="overflow-x: auto; overflow-y: hidden;">
<table>
<tr>
<th>Old_records</th>
<td>3</td>
</tr>
<tr>
<th>Records_fetched</th>
<td>10</td>
</tr>
<tr>
<th>New_records</th>
<td>80</td>
</tr>
<tr>
<th><p><b>Inside Table</b></p></th>
<td class="scrollable">
<div style="overflow-x: auto; overflow-y: hidden;">
<table>
<thead>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
<!-- Rest of the table headers -->
</tr>
</thead>
<tbody>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<!-- Rest of the table data -->
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<th>Old_records</th>
<td>32</td>
</tr>
<!-- Rest of the table rows -->
</table>
</div>

In diesem Beispiel wurde die CSS-Klasse „scrollable“ hinzugefügt,🧔 die das Überschwemmungsattribut für x auf „auto“ und das Überschwemmungsattribut für y auf „versteckt“ setzt.