Блог

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

Нужно ли мне устанавливать ширину, высоту на уровне <table> элемента или я должен делать это как для <tr> , так и <td> для элементов?

Например, эта таблица:

 <table>
        <tr >
            <td>
                Name
            </td>
            <td>
                Mr.Tuber
            </td>
        </tr>

        <tr >
            <td>
                Surname
            </td>
            <td>
                Tupova
            </td>
        </tr>
</table>
 

Содержимое ячейки никогда не выйдет за пределы таблиц, пока вы помещаете текст в ячейки.

Хороший способ создать такую таблицу — задать общий размер таблицы, а также ширину столбцов, используя CSS. Пусть таблица расширяется по вертикали, чтобы автоматически разместить содержимое.

 <table class="table1">
        <tr>
            <td class="col1">
                Name
            </td>
            <td class="col2">
                Mr.Tuber
            </td>
        </tr>

        <tr>
            <td>
                Surname
            </td>
            <td>
                Tupova
            </td>
        </tr>
</table>
 

CSS:

 table.table1 {
     width:500px
}

table1 .col1 {
     width:200px
}
 

Вам не нужно специально устанавливать col2, поскольку он займет все оставшееся место. Возможно, вы также захотите использовать TH вместо TD для ячеек заголовка, чтобы вы могли стилизовать их иначе, чем ячейки содержимого.

 .table1 th { ... }