Здравствуйте!
Есть элемент table, в строчках которого может быть некоторое число ячеек. Может быть 3 ячейки, может быть 5 или 10, но в разных строчках обязательно одинаковое количество. Ну то есть представляем нормальную, человеческую таблицу, как в экселе.
Как мне сделать через css так, чтобы:
- У таблички была некоторая фиксированная ширина, скажем 700px;
- У каждой колонки была некоторая фиксированная ширина, скажем 300px;
- Если суммарная ширина ячеек больше чем ширина таблицы, то должен появляться горизонтальный скролл. Собственно это у меня никак не получается: пока ширина колонок равномерно сокращается если превышает ширину таблицы, выставление свойства overflow не помогает
Иллюстрация к тому, что я хочу: http://jsfiddle.net/yt6169s1/
<div class="table-wrapper">
<table class="mytable">
<tr>
<th class="mytd">1</th>
<th class="mytd">2</th>
<th class="mytd">3</th>
<th class="mytd">4</th>
<th class="mytd">5</th>
<th class="mytd">6</th>
<th class="mytd">7</th>
</tr>
<tr>
<td class="mytd">1</td>
<td class="mytd">2</td>
<td class="mytd">3</td>
<td class="mytd">4</td>
<td class="mytd">5</td>
<td class="mytd">6</td>
<td class="mytd">7</td>
</tr>
</table>
</div>
.table-wrapper {
width: 700px;
}
.mytable {
border-collapse: collapse;
overflow: auto;
}
.mytd {
width: 300px;
border: 1px solid black;
}
Соответственно я хочу чтобы на примере по ссылке было видно только 1ю, 2ю колонки шириной 300px и часть 3й шириной 100px, а остальные прокручивались.
Я могу сделать это только через css, не применяя javascript и не меняя таблицу на структуру из дивов? Совместимость со всяким старьем необязательна.
Попробую переформулировать еще получше: Мне нужна некоторая область ограниченной ширины (скажем 700 px) в которую будет влезать несколько колонок фиксированной ширины (т.е. ширина колонок точно такая какую я указал, сказал 200px у каждой колонки - и будет честных 200px у каждой колонки). И если колонок больше чем надо (скажем 5), то чтобы появлялся горизонтальный скролл.
Другими словами мне надо примерно как здесь: http://jsfiddle.net/qr6e61bw/ только с таблицей а не с дивами