Ширина ячейки таблицы с бутстрапом

У меня есть простая таблица с двумя столбцами, я бы хотел, чтобы установить ширину каждого из этих столбцов, например, левый столбец 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>