设置相同宽度的两张桌子答案

【问题标题】：Set same width two tables设置相同宽度的两张桌子
【发布时间】：2018-11-23 04:58:11
【问题描述】：

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

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

我是这样设置的

<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;
}

【问题讨论】：

为什么要用两张表？标题使用th
@Morpheus 或者最好的 - thead
我用了2个表，之后会使用marquee，所以当数据在marquee中时，表头会固定在顶部
所以你可以在标题后面插入<tr><td colspan="3">yourmarquee<td></tr>。或者，也许我不明白什么？ jsfiddle.net/eV7M5/2

标签： html css html-table

【解决方案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>

【讨论】：

【解决方案2】：

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

要达到这个效果你可以尝试使用jquery table jtable sample code

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案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> 不是必需的。

【讨论】：

【解决方案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.

【讨论】：