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

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

要实现此效果，您可以尝试使用jquery表jtable sample code

Answer 3

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

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

Answer 4

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

<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>不是必需的。

Answer 5

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

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

Here's a working example

设置相同宽度的两个表

5 个答案: