Как привязать таблицу к максимальной ширине в таблице ширины

Я хотел бы иметь таблицу с заголовками слева, заголовки должны быть как можно более узкими, а пространство для значений должно занимать остальную часть ширины страницы. Заголовки должны быть на одной строке, если содержимое ячейки заголовка не очень длинное, и в этот момент заголовок должен быть перенесен на несколько строк.

С коротким контентом это работает:

<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th>Quite Long Header</th>
        <td>value</td>
    </tr>
</table>

CSS

table {
    width: 100%;
}

th {
    text-align: right;
    width: 10px;
    white-space: nowrap;
}

Однако, когда я пытаюсь добавить максимальную ширину, вместо обертывания содержимое выгружается из текстового поля:

table {
    width: 100%;
}

th {
    text-align: right;
    width: 10px;
    white-space: nowrap;
    max-width: 300px;
    word-break: break-all;
}

Демо: https://jsfiddle.net/2avm4a6n/

Кажется, стиль white-space: nowrap; переопределяет word-break: break-all;, поэтому max-width: 300px; вызывает выпадение текста. Я использую комбинацию white-space: nowrap; и width: 10px;, чтобы сделать столбец заголовка как можно более узким, без обертывания заголовков с пробелами ниже минимальной ширины, но наличие только width: 10px; и word-break: break-all; приводит к тому, что заголовки оберните в отдельные символы, чтобы они соответствовали узким 10px.

Любая идея, как это сделать с помощью css?

Ответы

Ответ 1

Удалите table width, от th удалите width, white-space и word-break. Добавьте к th word-wrap: word-break

Я также предлагаю вам установить min-width: 150px или любое значение, которое вы хотите. Также добавьте это td { width: 100%;}.

Вот jsFiddle

th {
    text-align: right;
    max-width: 300px;
    min-width: 150px;
    word-wrap: break-word;
}
td {
    width: 100%;
}

<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
</table>
<br />
<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th>Quite Long Header</th>
        <td>value</td>
    </tr>
</table>
<br />
<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th>Quite Long Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th>MMMMMMMMMMMMMMMMMMMMMMMMMMMassiveHeader</th>
        <td>value</td>
    </tr>
</table>

Ответ 2

Сообщите мне, если это то, что вы ищете:

удалите white-space:nowrap и word-break:break-all и добавьте word-wrap:break-word

см. фрагмент ниже:

table {
    width: 100%;
}

th {
    text-align: right;
    width: 10px;
    max-width: 300px;
    word-wrap:break-word    
}

<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
</table>
<br />
<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th>Quite Long Header</th>
        <td>value</td>
    </tr>
</table>
<br />
<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th>Quite Long Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th>MMMMMMMMMMMMMMMMMMMMMMMMMMMassiveHeader</th>
        <td>value</td>
    </tr>
</table>

Ответ 3

Как насчет некоторого раскладки сетки CSS3:

.grid {
    display: grid;    
    grid-template-columns: minmax(1fr, auto) auto;
}

.label {
    grid-column: 1;
    word-break: break-all;
    max-width: 300px;
}

.value {
    grid-column: 2;
}

<div class="grid">
    <div class="label">Short Header</div>
    <div class="value">value</div>
</div>
<br/>
<div class="grid">
    <div class="label">Short Header</div>
    <div class="value">value</div>
    <div class="label">Quite Long Header</div>
    <div class="value">value</div>
    <div class="label">Short Header</div>
    <div class="value">value</div>
</div>
<br/>
<div class="grid">
    <div class="label">Short Header</div>
    <div class="value">value</div>
    <div class="label">Quite Long Header</div>
    <div class="value">value</div>
    <div class="label">MMMMMMMMMMMMMMMMMMMMMMMMMMMassiveHeader</div>
    <div class="value">value</div>
    <div class="label">Quite Long Header</div>
    <div class="value">value</div>
</div>

Ответ 4

Если вы уже знаете, что данные находятся в <th>, вы можете затем обернуть текст длинной длины в тег <span> или так, и немного настройте CSS для этого.

ОБНОВЛЕНО JSFIDDLE

table {
    width: 100%;
}
th {
    text-align: right;
    white-space: nowrap;
}
th span {
    white-space: normal;
    word-break: break-all;
    display: block;
}
td {
    width: 100%;
}

<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
</table>
<br />
<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th>Quite Long Header</th>
        <td>value</td>
    </tr>
</table>
<br />
<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th>Quite Long Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th><span>MMMMMMMMMMMMMMMMMMMMMMMMMMMassiveHeader</span></th>
        <td>value</td>
    </tr>
</table>

Ответ 5

@Douglas: Я думаю, что вы все сделали правильно. но, как и в вашем примере, и вы спросили, что вам нужен узкий заголовок, вы указали ширину 10 пикселей на th. но если вы хотите достичь ширины 10px в вашем примере, то удалите только белое пространство: nowrap;

Затем он будет выглядеть как Пример 1.

Пример 1: https://jsfiddle.net/2avm4a6n/20/

Пример 2: Как и все предоставленные пользователем ответы, вы также можете сделать это

Пример 3: для вас есть другой вариант, если вы хотите использовать белое пространство: nowrap;, затем примените еще одну вещь, т.е. text-overflow: многоточие; переполнение: скрыто; https://jsfiddle.net/2avm4a6n/21/

<я >

 text-overflow: ellipsis;
 overflow: hidden;

ИЗМЕНИТЬ

И используйте text-align: left; если вы хотите, чтобы текст начинался с левой стороны

Ответ 6

Вы можете добиться этого, указав ширину на "th" и сделайте выравнивание по тексту: left

HTML

 <table border="1">
        <tr>
            <th>Short Header</th>
            <td>value</td>
        </tr>
    </table>
    <br />
    <table border="1">
        <tr>
            <th>Short Header</th>
            <td>value</td>
        </tr>
        <tr>
            <th>Quite Long Header</th>
            <td>value</td>
        </tr>
    </table>
    <br />
    <table border="1">
        <tr>
            <th>Short Header</th>
            <td>value</td>
        </tr>
        <tr>
            <th>Quite Long Header</th>
            <td>value</td>
        </tr>
        <tr>
            <th>MMMMMMMMMMMMMMMMMMMMMMMMMMMassiveHeader</th>
            <td>value</td>
        </tr>
    </table>

CSS

table {
    width: 100%;
}

th {
    text-align: left;
    width: 500px;
}

Рабочая скрипка: https://jsfiddle.net/2avm4a6n/16/