html - 设置相同宽度的两张桌子

Question

我有两个显示数据库数据的表。

现在我为标题设置了第一个表，为数据设置了第二个表。

我这样设置

<table class="t_status">
    <td>No</td>
    <td>Name</td>
    <td>Address</td>
</table>

在表 #2

<table class="t_status">
    <td>1</td>
    <td>Michael</td>
    <td>California</td>
<tr>
    <td>2</td>
    <td>Greg</td>
    <td>LA</td>

现在面临数据显示时的问题，表1和表2设置了不同的宽度。

这是CSS

table
{
empty-cells: show;
border-collapse: collapse;
width: 100%;
}

.t_status
{
border-collapse: collapse;
background: #fff;
border: 1px solid #d9d9d9;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
width: 100%;    
margin-top: -1px;
}

.t_status td, th
{
border-top: 1px solid #c0c0c0;
border-bottom: 1px solid #c0c0c0;
border-left: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
padding: 10px;
font-size: 40pt;
font-weight: bold;
}

.t_status td
{
color: #fff;
background-color: #000;
}

.t_status th
{
font-size: 40pt;
color: #fff;
}

Answer 1

尝试像这样放置它们：

<table class="t_status">
<tr>
   <td>No</td>
   <td>Name</td>
   <td>Address</td>
</tr>
</table>

和

<table class="t_status">
<tr>
   <td>1</td>
   <td>Michael</td>
   <td>California</td>
</tr>
<tr>
  <td>2</td>
  <td>Greg</td>
  <td>LA</td>
</tr>
</table>

Answer 2

您似乎忘记了<tr>标签。顺便说一句，如果你想保留你的标记（正确与否，但两个不同的表），你可以尝试使用第 n 个选择器并为每个单元格提供固定宽度：

.t_status td:nth-child(1) {
    width:2em;
}
.t_status td:nth-child(2) {
    width:5em;
}
.t_status td:nth-child(3) {
    width:5em;
}

这是一个工作示例。

Answer 3

如果是正确的，您正在使用两个表来实现头部和数据的滚动效果，因此您将获得所有数据的表头。

要达到这个效果你可以尝试使用jquery table jtable 示例代码

Answer 4

您的 html 语法不正确。使用 tr 标签：-

<table class="t_status">
<tr>
   <td>No</td>
   <td>Name</td>
   <td>Address</td>
</tr>
</table>

Answer 5

您应该将所有信息放在一个表中，这样您就可以确保行具有相同的宽度。

<table class="t_status">
    <thead>
        <tr>
            <th>No</th>
            <th>Name</th>
            <th>Address</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Michael</td>
            <td>California</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Greg</td>
            <td>LA</td>
        </tr>
    </tbody>
</table>

<thead></thead>并且<tbody></tbody>没有必要。