Ширина ячейки таблицы с бутстрапом
У меня есть простая таблица с двумя столбцами, я бы хотел, чтобы установить ширину каждого из этих столбцов, например, левый столбец 30% правый столбец 70%. В конце концов, у меня будет сотни строк. Если я могу применить глобальный класс css, я думаю, что это было бы лучше?
В настоящее время левый столбец сжат и выглядит не очень хорошо.
Я создал jsfiddle, если кто-то может оказать некоторую помощь.
<div class="container">
<div class="row col-md-8">
<table class="table table-striped">
<tr>
<td>row name here</td>
<td>sed auctor diam sollicitudin ut. Donec et sodales quam, eu vehicula urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer eget</td>
</tr>
<tr>
<td>another row name here</td>
<td>sed auctor diam sollicitudin ut. Donec et sodales quam, eu vehicula urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer egetsdsdfsdf fsdfsdf</td>></tr>
</table>
</div>
</div>
Ответы
Ответ 1
Вот мой пример. Я добавил идентификатор в таблицу для облегчения доступа.
Разметка
<div class="container">
<div class="row col-md-8">
<table class="table table-striped" id="someid">
<tr>
<td>row name here</td>
<td>sed auctor diam sollicitudin ut. Donec et sodales quam, eu vehicula urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer eget</td>
</tr>
<tr>
<td>another row name here</td>
<td>sed auctor diam sollicitudin ut. Donec et sodales quam, eu vehicula urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer egetsdsdfsdf fsdfsdf</td>></tr>
</table>
</div>
</div>
CSS
#someid tr td:nth-child(1){
width:30%;
}
Fiddle
Ответ 2
Вы можете использовать свойство css table-layout: fixed
Это заставит заданную ширину столбцов:
table {
table-layout: fixed;
}
td:first-child {
width: 30%;
}
td:last-child {
width: 70%;
}
Обновлена скрипка
Обычно вы должны указывать каждую ячейку в столбце той же ширины, но с table-layout: fixed
вы можете установить ее только в ячейке заголовка столбца:
<thead>
<tr>
<th class="first">Column A</th>
<th class="second">Column B</th>
</tr>
</thead>
Как показано в этой скрипке
Ответ 3
когда я попытался использовать свойство width
при первом td
из tr
, он отлично работает для меня
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row col-md-8">
<table class="table table-striped">
<tr>
<td width="30%">row name here</td>
<td width="70%">sed auctor diam sollicitudin ut. Donec et sodales quam, eu vehicula urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer eget</td>
</tr>
<tr>
<td>another row name here</td>
<td>sed auctor diam sollicitudin ut. Donec et sodales quam, eu vehicula urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer egetsdsdfsdf fsdfsdf</td></tr>
</table>
</div>
</div>
Ответ 4
Определите свойство min-width для вашего класса nowrap, например:
td.nowrap {
min-width: 129px;
}
Обновлен fiddle
Ответ 5
Добавьте этот CSS:
table.table.table-striped tr > td:first-child {
width:30%;
}
Ответ 6
<style>
td{
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
}
#someid tr td:nth-child(1){
width:10%;
}
</style>
add id "somdeid" in table
<table id="someid">
<tbody>
<tr>
<td>some text here</td>
<td>some long text here</td>
</tr>
</tbody>
</table>