1
Ich habe zwei Tabelle wie folgt aus:Vertikale Ausrichtung von zwei Tabellen
#reference
{
\t font-family: "Roboto", sans-serif;
\t font-size: 14px;
\t margin: 0px 10px 0px 15px;
\t text-align: left;
\t border-collapse: collapse;
\t color: navy;
}
#reference th
{
\t padding: 8px;
\t font-size: 16px;
\t font-weight: normal;
\t background: yellow;
\t border-top: 2px solid #000;
\t border-bottom: 1px solid #000;
\t border-left: 1px solid #000;
\t border-right: 1px solid #000;
\t color: navy;
\t text-align: center;
}
#reference td
{
\t padding: 8px;
\t border-bottom: 1px solid #000;
\t border-top: 1px solid #000;
\t border-left: 1px solid #000;
\t border-right: 1px solid #000;
\t color: #669;
}
#reference tbody tr:hover td
{
\t background: pink;
\t color: #339;
}
#copy
{
\t font-family: "Roboto", sans-serif;
\t font-size: 14px;
\t margin: 0px 10px 0px 15px;
\t text-align: left;
\t border-collapse: collapse;
\t color: navy;
}
#copy th
{
\t padding: 8px;
\t font-size: 16px;
\t font-weight: normal;
\t background: yellow;
\t border-top: 2px solid #000;
\t border-bottom: 1px solid #000;
\t border-left: 1px solid #000;
\t border-right: 1px solid #000;
\t color: navy;
\t text-align: center;
}
#copy td
{
\t padding: 8px;
\t border-bottom: 1px solid #000;
\t border-top: 1px solid #000;
\t border-left: 1px solid #000;
\t border-right: 1px solid #000;
\t color: #669;
}
#copy tbody tr:hover td
{
\t background: pink;
\t color: #339;
}<!DOCTYPE html>
<html>
\t <head>
\t \t <title>Tables test</title>
\t \t <link href="style.css" rel="stylesheet" type="text/css">
\t \t <meta charset="utf-8">
\t </head>
\t <body>
\t \t <table id="reference">
\t \t \t <thead>
\t \t \t \t <th style="width: 100px;">t1 - header 1</th>
\t \t \t \t <th style="width: 200px;">t1 - header 2</th>
\t \t \t \t <th style="width: 250px;">t1 - header 3</th>
\t \t \t </thead>
\t \t <tbody>
\t \t \t <tr>
\t \t \t \t <td>t1 - value 1</td>
\t \t \t \t <td>t1 - value 2</td>
\t \t \t \t <td>t1 - value 3</td>
\t \t \t </tr>
\t \t \t <tr>
\t \t \t \t <td>t1 - value 4</td>
\t \t \t \t <td>t1 - value 5</td>
\t \t \t \t <td>t1 - value 6</td>
\t \t \t </tr>
\t \t \t <tr>
\t \t \t \t <td>t1 - value 7</td>
\t \t \t \t <td>t1 - value 8</td>
\t \t \t \t <td>t1 - value 9</td>
\t \t \t </tr>
\t \t </tbody>
\t \t </table>
\t \t <table id="copy">
\t \t \t <thead>
\t \t \t \t <th style="width: 300px; height: 0;">t2 - header 1</th>
\t \t \t \t <th style="width: 250px; height: 0;">t2 - header 2</th>
\t \t \t </thead>
\t \t \t <tbody>
\t \t \t \t <tr>
\t \t \t \t \t <td style="width: 300px;">t2 - value 1</td>
\t \t \t \t \t <td style="width: 250px;">t2 - value 2</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td style="width: 300px;">t2 - value 3</td>
\t \t \t \t \t <td style="width: 250px;">t2 - value 4</td>
\t \t \t \t </tr>
\t \t \t </tbody>
\t \t </table>
\t </body>
</html>I need "t2 - Header 1" auf genau die gleiche Breite wie haben "t1 - Header 1" + "t1 - Kopf 2". Ich führe mehrere Suchen im Internet durch, finde die gleichen Lösungen, aber alle arbeiten für Spalten mit gleicher Breite, während ich vordefinierte Spaltenbreiten haben muss. Irgendwelche Ideen?
Müssen Sie haben zwei verschiedene Tabellen oder können schauen Sie in Bootstrap-Tabellen zu erhalten sie werden kombiniert? Auch das ist kein gültiges HTML5. – j08691
Zwei verschiedene Tabellen. –