Пробел после строки, содержащей самый длинный текст в столбце таблицы HTML - PullRequest
Новая
       35

Пробел после строки, содержащей самый длинный текст в столбце таблицы HTML

0 голосов
/ 25 октября 2018

У меня есть таблица HTML с несколькими столбцами.

В столбце может быть самый длинный текст где-то посередине таблицы.В какой бы строке не было самого длинного текста, я бы хотел добавить отступ, скажем, 5px вправо, чтобы текст из следующего столбца в той же строке не начинался сразу после.

И я хотел бы сделатьэто для каждого столбца в таблице HTML.

Возможно ли сделать это на уровне таблицы вместо того, чтобы делать это в каждой строке?Как мне этого добиться?Пожалуйста, помогите!

Пример таблицы: 

<!DOCTYPE html>
<html>
<body>
<table>
<tr><td>lengthy text</td><td>123</td><td>No</td></tr>
<tr><td>lengthiest text</td><td>123</td><td>No</td></tr>
<tr><td>lengthier text</td><td>123</td><td>No</td></tr>
</table>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 25 октября 2018

эта работа: 

<style>
   table tr td{
    padding: 0px 05px 0px 05px;
   }
  </style>
  <table>
   <tr><td>lengthy text</td><td>123</td><td>No</td></tr>
   <tr><td>lengthiest text</td><td>123</td><td>No</td></tr>
   <tr><td>lengthier text</td><td>123</td><td>No</td></tr>
  </table>
0 голосов
/ 25 октября 2018

Насколько я знаю, на самом деле невозможно добавить отступ только к самому длинному ряду;однако вы можете добавить заполнение ко всем <td> элементам: 

<html>
<head>
<style>
table tr td {
    padding-left: 5px;
    padding-right: 5px;
}
</style>
</head>
<body>
.... (your table code here)

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

<head>
<style>
table tr td:first-child {
    padding-left: 5px;
    padding-right: 5px;
}
</style>
</head>

Для получения дополнительной информации см. Документацию по CSS padding и CSS-селекторы .

...