设置相同的宽度2表

问题描述：

我有两个表显示数据库中的数据。设置相同的宽度2表

现在我为头条和第二个表设置数据表。

我这样设置

<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 2013-05-03 08:56:43

@Morpheus或者处于最佳状态 - 'thead' – Joshua 2013-05-03 08:57:54

我使用2个表格的原因，之后会使用字幕，所以当数据在选取框时，表格头部将固定保持在顶部 – 2013-05-03 08:59:04

答

尝试把他们像这样：

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

答

如果是正确使用的是两个表的滚动头的效果和数据，所以你会得到所有数据的表头。

达到这样的效果，你可以尝试使用jQuery表的JTable sample code

答

你的HTML语法不正确。使用tr标签： -

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

答

您应该将所有信息放在一张表中，因此您可以确保行具有相同的宽度。

<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>没有必要。

答

看起来你已经忘记了<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。

设置相同的宽度2表

相关推荐