1
我有兩個表，就像這樣的垂直對齊：兩個表
#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>我需要 「T2 - 頭1」 爲具有確切相同的寬度， 「T1 - 頭1」 + 「t1 - 標題2」。我在互聯網上運行了幾次搜索，發現了相同的解決方案，但所有的作品都有相同的寬度，而我需要預定義的列寬。有任何想法嗎？
你需要有兩個不同的表中，或者一個高級的外觀他們合併？另外，這不是有效的HTML5。 – j08691
兩個不同的表。 –