2013-05-03 3 views
-1

У меня есть две таблицы, которые показывают данные из базы данных.Установить ту же ширину 2 таблицы

Теперь я установил 1-й стол для заголовков и 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; 
} 
+2

Почему вы используете две таблицы? Используйте 'th' для заголовков – Morpheus

+0

@Morpheus Или в лучшем случае -' thead' – Joshua

+0

Я использую 2 таблицы, потому что после этого будет использоваться область выделения, поэтому, когда данные в шатрах, голова стола фиксируется, остается в верхней части –

ответ

0

попытаться поставить их так:

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

, если не ошибаюсь, вы используете две таблицы для прокрутки эффекта головы и данные, поэтому вы получите заголовок таблицы для всех данных.

для достижения этого эффекта вы можете попробовать с помощью JQuery таблицы JTable sample code

0

Ваш HTML синтаксис неверен. Используйте Tr теги: -

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

Вы должны поместить всю информацию в одну таблицу, таким образом, вы можете гарантировать, что строки имеют одинаковую ширину.

<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> не нужны.

0

Похоже, вы забыли теги <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.