Имам следните изисквания за поведение на таблицата на моя уебсайт:
- клетките никога няма да получат изрична ширина, ще оставя оразмеряването на клетките на браузъра въз основа на съдържанието
- Масата като цяло никога не трябва да заема повече от 100% ширина
- В някои крайни случаи, дори при наложена максимална ширина и обвиване на таблицата, общата ширина може да надхвърли 100% (например на мобилни устройства). В този случай искам таблицата да е със 100% ширина, с хоризонтално превъртане.
За да постигнете горното, разгледайте този JSBin.
HTML:
<table>
<thead>
<tr>
<th>Column one</th>
<th>Column two</th>
<th>Column three</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>2.1</td>
<td>3.1</td>
</tr>
<tr>
<td>1.2</td>
<td>2.2</td>
<td>3.2</td>
</tr>
<tr>
<td>1.3</td>
<td>2.3</td>
<td>3.3</td>
</tr>
</tbody>
</table>
CSS:
table {
display: block;
table-layout: fixed;
overflow-x: scroll;
max-width:100%;
background-color: #697A09 !important;
}
th, td {
padding: 10px;
background-color:white;
width:auto;
}
Идеята зад тази настройка: max-width върху таблици работи само когато таблицата е настроена на display:block. Хоризонталното превъртане за крайни случаи (малки прозорци за изгледи) се осъществява с помощта на overflow-x в комбинация с table-layout:fixed.
Това удовлетворява изискванията ми, но има един неочакван проблем: използването на display:block ще накара самата таблица да използва 100% от ширината. Изглежда обаче клетките не следват тези 100%, комбинирани те заемат много по-малко от 100% от ширината на таблицата, както се опитах да подчертая в примера, използвайки различни цветове на фона.
Това, което основно искам, е таблицата винаги да заема точно 100% от всеки родителски елемент, в който се намира, и клетките да са разпределени в тези 100%, без изрично да се задава тяхната ширина.
Възможно ли е такова нещо?
