Adjust Columns of 2 HTML tables

Question

Adjust Columns of 2 HTML tables

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (1 votes)
#4 by (1 votes)
#5 by (1 votes)

1

Currently I have 1 table (html) with 2 tables (html) whose problem is that when displayed on a small screen the headings are mismatched with the table
My table (example):

<table width="100%" >

 <tr>
   <table width="100%" >
     <tr>
<th width='25%'>nombre0</th>
<th width='25%'>nombre1</th>
<th width='25%'>nombre2</th>
<th width='25%'>nombre3</th>
     </tr>
   </table>
 </tr>

<tr>
  <td>
     <table width="100%" >
  <tr>
<td width='25%'>0</td>
<td width='25%'>1</td>
<td width='25%'>2</td>
<td width='25%'>3</td>
   </tr>
     </table> 
  </td>
</tr>

</table>

In this case when seen on a smaller screen 1, 2, end under name0 I would like that in this case without stopping using both tables within the main table to be able to make sure that the headings do not get out of line and that they continue to collude.

javascript html5 html css html-tabla

asked by claus 07.08.2018 в 19:40

source

5 answers

concatenate java arrays [closed] restart table when closing modal

score 2 · Answer 1

The code you share needs the TD tags in the first column.

<table width="100%">
    <tr>
            <td  width="50%">
            <table width="100%" >
                    <tr>
                        <th width='25%'>nombre0</th>
                        <th width='25%'>nombre1</th>
                        <th width='25%'>nombre2</th>
                        <th width='25%'>nombre3</th>
                    </tr>
            </table>
        </td>
        </tr>
    <tr>
        <td  width="50%">
                <table width="100%" >
                    <tr>
                        <td width='25%'>0</td>
                        <td width='25%'>1</td>
                        <td width='25%'>2</td>
                        <td width='25%'>3</td>
                </tr>
                </table> 
        </td>
    </tr>
</table>

score 1 · Answer 2

You could use the property min-width so that each th and td have at least one width so you would prevent them from looking messy, here is your example putting a min-width of 70px, I have also added a border to make the example look better:

td, th {
  min-width:70px;
  border:1px solid black;
  }

<table width="100%" >

 <tr>
   <table width="100%" >
     <tr>
<th width='25%'>nombre0</th>
<th width='25%'>nombre1</th>
<th width='25%'>nombre2</th>
<th width='25%'>nombre3</th>
     </tr>
   </table>
 </tr>

<tr>
  <td>
     <table width="100%" >
  <tr>
<td width='25%'>0</td>
<td width='25%'>1</td>
<td width='25%'>2</td>
<td width='25%'>3</td>
   </tr>
     </table> 
  </td>
</tr>

</table>

score 1 · Answer 3

The problem is that you are not putting it in a column to table 2, you must put it inside the <td> tag like table 3. I hope it helps you

<!DOCTYPE html>
<html>
<head>
</head>

<body>
<h2>HTML Table</h2>
<table width="100%">
  <tr>
    <td>
     <table width="100%" border="1" bgcolor="red" >
       <tr>
        <th width='25%'>nombre0</th>
        <th width='25%'>nombre1</th>
        <th width='25%'>nombre2</th>
        <th width='25%'>nombre3</th>
       </tr>
     </table>
   <td>
  </tr>
  <tr>
    <td>
     <table width="100%" border="1" bgcolor="yellow">
      <tr>
        <td width='25%'>0</td>
        <td width='25%'>1</td>
        <td width='25%'>2</td>
        <td width='25%'>3</td>
      </tr>
     </table>
    </td>
  </tr>
</table>
</body>
</html>

score 1 · Answer 4

I enclose an example code ... tell me if it is what you need

table {
  width: 100%;
}

thead,
tbody,
tr,
td,
th {
  display: block;
}

tr:after {
  content: ' ';
  display: block;
  visibility: hidden;
  clear: both;
}

thead th {
  height: 30px;
  /*text-align: left;*/
}

tbody {
  height: 80px;
  overflow-y: auto;
}

thead {
  /* fallback */
}

tbody td,
thead th {
  width: 50%;
  float: left;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container table-responsive">
  <table class="table table-striped table-hover">
    <thead>
      <tr>
        <th>Columna 1</th>
        <th>Columns 2</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Dato 1</td>
        <td>Dato 2</td>
      </tr>
      <tr>
        <td>Dato 3</td>
        <td>Dato 4</td>
      </tr>
      <tr>
        <td>Dato 5</td>
        <td>Dato 6</td>
      </tr>
      <tr>
        <td>Dato 7</td>
        <td>Dato 8</td>
      </tr>
    </tbody>
  </table>
</div>

score 1 · Answer 5

in advance I greatly appreciate the support to those who commented and proposed answers, it was a great help
at the end I get the purpose that the header and the rows are adjusted so that you can see which one belongs to which when the lower table uses the scroll to see more records
this example has 13 fields and the names within the row are of different thickness to check the result, sorry if it is something extensive:

    <table >
      <tr>
        <td>
         <table >
          <tr>
            <td style="min-width:120px" style="white-space:nowrap;">Dato uno uno</td>
            <td style="min-width:120px" style="white-space:nowrap;">Dato dos dos</td>
            <td style="min-width:120px" style="white-space:nowrap;">Dato dos tres</td>
            <td style="min-width:120px" style="white-space:nowrap;">Dato dos cuatro</td>
            <td style="min-width:120px" style="white-space:nowrap;">Dato dos cinco</td>
            <td style="min-width:120px" style="white-space:nowrap;">Dato dos dseis</td>
            <td style="min-width:120px" style="white-space:nowrap;">Dato dos siete</td>
            <td style="min-width:120px" style="white-space:nowrap;">Dato dos ocho</td>
            <td style="min-width:120px" style="white-space:nowrap;">Dato dos nueve</td>
            <td style="min-width:120px" style="white-space:nowrap;">Dato dos diez</td>
            <td style="min-width:120px" style="white-space:nowrap;">Dato dos once</td>
            <td style="min-width:120px" style="white-space:nowrap;">Dato dos doce</td>
            <td style="min-width:120px" style="white-space:nowrap;">Dato dos trece</td>
          </tr>
         </table>
       <td>
      </tr>
      <tr>
        <td>
         <table >
          <tr>
            <td style="min-width:120px" style="white-space:nowrap;"> 1</td>
            <td style="min-width:120px" style="white-space:nowrap;">Dato 2</td>
            <td style="min-width:120px" style="white-space:nowrap;"> 3</td>
            <td style="min-width:120px" style="white-space:nowrap;">Dato 4</td>
            <td style="min-width:120px" style="white-space:nowrap;"> 5</td>
            <td style="min-width:120px" style="white-space:nowrap;">Dato 6</td>
            <td style="min-width:120px" style="white-space:nowrap;"> 7</td>
            <td style="min-width:120px" style="white-space:nowrap;">Dato 8</td>
            <td style="min-width:120px" style="white-space:nowrap;"> 9</td>
            <td style="min-width:120px" style="white-space:nowrap;">Dato 10</td>
            <td style="min-width:120px" style="white-space:nowrap;"> 11</td>
            <td style="min-width:120px" style="white-space:nowrap;">Dato 12</td>
            <td style="min-width:120px" style="white-space:nowrap;"> 13</td>
          </tr>
          <tr>
            <t

d style="min-width:120px" style="white-space:nowrap;">Dato 1</td>
        <td style="min-width:120px" style="white-space:nowrap;"> 2</td>
        <td style="min-width:120px" style="white-space:nowrap;">Dato 3</td>
        <td style="min-width:120px" style="white-space:nowrap;"> 4</td>
        <td style="min-width:120px" style="white-space:nowrap;">Dato 5</td>
        <td style="min-width:120px" style="white-space:nowrap;"> 6</td>
        <td style="min-width:120px" style="white-space:nowrap;">Dato 7</td>
        <td style="min-width:120px" style="white-space:nowrap;"> 8</td>
        <td style="min-width:120px" style="white-space:nowrap;">Dato 9</td>
        <td style="min-width:120px" style="white-space:nowrap;"> 10</td>
        <td style="min-width:120px" style="white-space:nowrap;">Dato 11</td>
        <td style="min-width:120px" style="white-space:nowrap;"> 12</td>
        <td style="min-width:120px" style="white-space:nowrap;">Dato 13</td>
      </tr>      
     </table>
    </td>
  </tr>
</table>

I hope this helps someone in the future