CSS Table Layout

Question

У меня есть таблица HTML с 3 столбцами, и количество текста в каждом столбце является переменным. Я хотел бы установить некоторые правила для макета таблицы, но я не уверен, как это сделать в CSS.

Title   | Author | Publisher

Коэффициент по умолчанию составляет 50%, 25%, 25% для каждого столбца. Цель состоит в том, чтобы держать все на одной линии, если это возможно. Столбцы автора и издателя имеют более высокий приоритет, чем столбец заголовка.

ОБНОВЛЕНИЕ: Проблема в том, что объем текста превышает ширину одной строки.

Answer 1

Вам необходимо изменить проценты до определенной ширины (px).Определите ширину таблицы, а также присвойте каждому <TD> свое собственное определение ширины, которое вместе равно ширине таблицы.Лучшим способом было бы создать класс CSS для обоих и просто назначить класс каждому элементу.Нечто подобное, очень общее, очевидно.

.table{
  width:500px;
}

.tablecell_1{
  width:200px;
}

.tablecell_2{
  width:200px;
}

.tablecell_3{
  width:100px;
}

<table class="table">
  <tr>
    <td class="tablecell_1">
    </td>
    <td class="tablecell_2">
    </td>
    <td class="tablecell_3">
    </td>
  </tr>
</table>

Answer 2

Вы можете создать класс для каждого из столбцов.

<th class="title">Title</th>
<th class="author">Author</th>
<th class="publisher">Publisher</th>

И сделайте CSS специфичным для каждого.

.title{
}

.author{
}

.publisher{
}

Answer 3

Определите ширину таблицы, а затем добавьте класс к тегам <td> с помощью `width: auto;

.table{
  width:900px;
}

.cell{
  width:auto;
}

А вот твой стол

<table class="table">
  <tr>
    <td class="cell">
    </td>
    <td class="cell">
    </td>
    <td class="cell">
    </td>
  </tr>
</table>

Позвольте мне сейчас, если это то, что вы хотите