Вот что я бы сделал:
Html:
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
CSS:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
table {
width: 100%;
table-layout:fixed;
word-wrap:break-word;
}
table td {
width:9999px;
border: 1px solid black;
overflow: hidden;
}
table tr td:first-child {
width: 10px;
border: 1px solid black;
}
А потом просто:
- установить ширину первого столбца так, как вы хотите.
- установить переполнение: прокрутить контейнер таблицы
Решение заключается в свойстве table-layout:fixed;, которое определяет, что таблица должна быть точно такой же ширины, как вы ее определили. так как это может испортить ваш текст (он будет полностью перекрывать друг друга), вы можете добавить word-wrap:break-word;, чтобы разбить слова на несколько строк.
table-layout:fixed; довольно хорошо поддерживается, за исключением IE / Mac (http://caniuse.com/#search=table-layout), word-wrap:break-word; менее поддерживается (хотя http://caniuse.com/#search=word-wrap показывает иное, break-word немного сложно. ., но вы можете оставить его там, так как это не повредит вам и сделает ваш сайт перспективным.
РЕДАКТИРОВАТЬ Я получил то, что вы хотите: первый столбец гибкий, остальные на фиксированной с. Без кардинального изменения html (и создания некрасивого несемантического неэффективного монстра) это невозможно (на данный момент). Позвольте мне объяснить вам, почему:
Чтобы таблица была фиксированного размера (ширина всех фиксированных столбцов + что-то), вы должны установить table-layout:fixed;. Это говорит браузеру рассчитать ширину таблицы перед ее отображением, чтобы он мог отображать ее даже до того, как весь контент был загружен (бонус для вас: повышение производительности! ). Но теперь вы хотите, чтобы один столбец был гибким, поэтому он должен был бы вычислять ширину во время выполнения, и мы просто предотвратили это, чтобы иметь столбцы фиксированной ширины.
Это означает, что вам все равно придется явно установить ширину первого столбца . Насколько я знаю, это единственный способ достичь желаемого эффекта. Я подумаю немного больше об этом, но я думаю, что это наилучшее из возможных.
РЕДАКТИРОВАТЬ 2 Хорошо, попробовав некоторые идеи, я пришел к выводу, что единственный способ достичь желаемого эффекта - сбросить table, и создайте структуру из div с и span с, плавающую влево и вправо, с display: inline-block и переносами слов ... не совсем семантически, если вам нужно показать табличные данные. И, безусловно, не подлежит ремонту. Это твой звонок ...
РЕДАКТИРОВАТЬ 3 И здесь у вас есть живая демонстрация, основанная на jsfiddle от Blowski : http://jsfiddle.net/ramsesoriginal/KcV9B/