Ширина столбца таблицы уменьшается, если фиксированное положение установлено (только для Chrome)

У меня простая таблица

Ячейки в таблице соответствуют тексту плюс некоторое дополнительное пространство, appx 4 пробела или около того. У меня есть вторая, аналогичная таблица, с position:fixed; и он сокращает лишнее пространство вокруг текста до нуля, поэтому две таблицы больше не имеют одинаковой ширины.

Мне нужна таблица заголовков, которая имеет ту же ширину, что и фактическая таблица, но привязана к той же позиции экрана

Изменение: это только в Chrome.

Изменение: Чтобы воспроизвести проблему, скопируйте следующий код в html-документ и откройте его с помощью chrome:

<table>
 <tbody><tr> 
 <td>
 Park Name
 </td>
 <td>
 Park Viewed
 </td>
 <td>
 Book Now Button
 </td>
 <td>
 Website Button
 </td>
 <td>
 Call Button
 </td>
 <td>
 Email Button
 </td>
 <td>
 Book Now Call Button
 </td>
 </tr>
</tbody></table>
<table>
 <tbody><tr> 
 <td>
 Park Name
 </td>
 <td>
 Park Viewed
 </td>
 <td>
 Book Now Button
 </td>
 <td>
 Website Button
 </td>
 <td>
 Call Button
 </td>
 <td>
 Email Button
 </td>
 <td>
 Book Now Call Button
 </td>
 </tr>


 <tr>
 <td>
 Camp Hatteras RV Resort and Campground
 </td>
 <td>
 1
 </td>
 <td>

 </td>
 <td>

 </td>
 <td>

 </td>
 <td>

 </td>
 <td>

 </td>
 </tr>

</tbody></table>

Это связано с тем, что длинное имя парка обертывается на следующую строку

2 ответа

Рабочая демонстрация: http://jsfiddle.net/L7tzB/

КОД:

<table cellpadding="0" cellspacing="0" border="1">
<tbody><tr>
 <td>Park Name</td>
 <td>Park Viewed</td>
 <td>Book Now Button</td>
 <td>Website Button</td>
 <td>Call Button</td>
 <td>Email Button</td>
 <td>Book Now Call Button</td>
</tr>
</tbody></table>
<table cellpadding="0" cellspacing="0" border="1">
<tbody><tr>
 <td>Park Name</td>
 <td>Park Viewed</td>
 <td>Book Now Button</td>
 <td>Website Button</td>
 <td>Call Button</td>
 <td>Email Button</td>
 <td>Book Now Call Button</td>
</tr>
<tr>
 <td>Camp Hatteras RV Resort and Campground</td>
 <td>1</td>
 
 
 
 
 
</tr>
</tbody></table>


По умолчанию в ячейках таблицы нет места вокруг текста - они автоматически расширяются настолько, чтобы разместить контент (до тех пор, пока не будет достигнута граница контейнера стола, после чего содержимое может обернуться). Похоже, что в вашей таблице без заголовка ячейки расширяются по содержимому ячеек в некоторых строках (где текст длиннее заголовка столбца). Если вы хотите, чтобы столбцы в обеих таблицах имели равную ширину, самым простым решением является явно указывать все ширины.

Примечание: избегайте использования атрибута width , вместо этого используйте CSS.

licensed under cc by-sa 3.0 with attribution.