Как минимизировать верхнее и нижнее отступы для ячеек таблицы HTML?

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

В приведенном ниже фрагменте показано, что я сделал до сих пор. Однако он по-прежнему содержит видимые верхние и нижние «отступы» для текста ячейки.

Какие другие параметры CSS существуют для уменьшения этого пробела над текстом, чтобы текст отображался чуть ниже верхней строки, а нижняя строка рисовалась чуть ниже текста без пробелов?

td {
  border: 1px solid silver;
  line-height: 1;
}

table {
  border-collapse: collapse;
}
<!DOCTYPE html>
<html>

<head>
  <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Table Test</title>
</head>

<body>
  <table>
    <tr>
      <td>
        First row
      </td>
    </tr>
    <tr>
      <td>
        Second row
      </td>
    </tr>
  </table>
</body>

</html>

Большое спасибо за ответы!

В моем случае фактические семейства шрифтов и размеры шрифтов неизвестны, это означает, что CSS не может использовать какие-либо фиксированные значения для высоты строки, поскольку это имеет риск обрезания символов. Поэтому я ищу «каноническое» и безопасное решение.

В идеале существует только один единственный параметр CSS, который приводит к исчезновению «разрыва» между текстом и рамкой и работает со всеми семействами шрифтов и размерами шрифтов (в одной ячейке может использоваться более одного шрифта).


html css html-table cellpadding
person mjn    schedule 03.06.2019    source источник
comment
изменение высоты строки в тексте может помочь   -  person Andre F    schedule 03.06.2019
comment
заполнение: от 0 до td?   -  person Temani Afif    schedule 03.06.2019
comment
@AndreF да, это мало влияет. Однако осталось видимое заполнение.   -  person mjn    schedule 03.06.2019
comment
Не используйте p в своем _2 _... Если вы действительно не имеете в виду, что у вас есть абзац текста. См. Можно ли поместить <p> внутрь <td>, чтобы поместить текст содержимого?   -  person Heretic Monkey    schedule 03.06.2019
comment
@HereticMonkey Я удалил букву p (делает пример более читаемым)   -  person mjn    schedule 03.06.2019

Ответы (5)


arrow_upward
1
arrow_downward

сначала сделайте семейство шрифтов ячеек одинаковым, здесь вы описываете только одно семейство шрифтов ячеек, поэтому обе ячейки имеют разную высоту строки и заполнение.

так что сделайте это одним семейством шрифтов && сделайте высоту строки 12 пикселей;

person Harikrishnan k    schedule 03.06.2019
comment
Большое спасибо, пожалуйста, посмотрите мою правку - семейства шрифтов и размеры шрифтов неизвестны, поэтому существует опасность, что фиксированные значения для высоты строки вызовут обрезанные символы. - person mjn; 03.06.2019
comment
хорошо, используйте этот способ td {margin: 0px; отступ: 0 пикселей; высота строки: 12 пикселей; } так что больше никаких отступов и полей, в основном вам нужно указать высоту строки в пикселях - person Harikrishnan k; 03.06.2019

arrow_upward
0
arrow_downward

Попробуй это:

body,
p {
  margin: 0px;
}

td {
  border: 1px solid silver;
  padding:0; 
  margin:0;
}

table {
  border-collapse: collapse;
}

Это еще больше минимизирует поля и отступы в ячейке.

person wasanga7    schedule 03.06.2019
comment
С Firefox и Chrome я не вижу разницы. Какой браузер вы используете для тестирования? - person mjn; 03.06.2019
comment
Я использую Chrome v74.0.3729.169 и вижу небольшую разницу. - person wasanga7; 03.06.2019
comment
Здесь та же версия, я не уверен, что не так с моим браузером. Я попробую снова. - person mjn; 03.06.2019

arrow_upward
0
arrow_downward

Вы пытались добавить div в каждую строку для нижнего края?

Как это :

<!DOCTYPE html>
<html>

<head>
  <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Table Test</title>
</head>

<body>
  <table>
    <tr>
      <td>
        <p>
   <div class="FirstRow">
          First row
   </div>
        </p>
      </td>
    </tr>
    <tr>
      <td>
        <p>
          <div class="SecondRow">
          Second row
          </div>
        </p>
      </td>
    </tr>
  </table>
</body>

</html>

и

body,
p {
  margin: 0px;
}

td {
  border: 1px solid silver;
}

table {
  border-collapse: collapse;
}

 .FirstRow {
  margin-bottom: ...px;
}

 .SecondRow {
  margn-bottom: ...px;
}

 table {
  border-collapse: collapse;
}

?

person SuRo    schedule 03.06.2019
comment
Как добавление дополнительных элементов в HTML уменьшит пространство? Пожалуйста, отредактируйте свой вопрос, чтобы объяснить, как это решает проблему OP. - person Heretic Monkey; 03.06.2019
comment
Здравствуйте, я добавил элемент ‹Div› в HTML, чтобы отредактировать их в CSS. А затем добавьте margin-top: ... px; чтобы уменьшить отступ - person SuRo; 03.06.2019

arrow_upward
0
arrow_downward

Попробуй это:

td {
  line-height: 10px; /* or value which suits your design */
}

Как насчет этого?:

td div{
    margin-top: -4px; /* or value which suits your design */
}

....
<td><div>Your Data</div></td>
....
person maddy23285    schedule 03.06.2019
comment
высота строки: 1; (без единицы измерения) - рекомендуемый способ developer.mozilla.org/en -US / docs / Web / CSS / line-height - у меня нет контроля над фактическими размерами шрифтов, поэтому я не могу использовать фиксированное значение - person mjn; 03.06.2019
comment
Попробуйте, это редко бывает хорошим ответом. Лучше объяснить, почему вы предлагаете код, присутствующий в ответе. - person Heretic Monkey; 03.06.2019
comment
@Heretic Monkey, свойство line-height контролирует расстояние между строками текста. Как мы знаем, по умолчанию TD автоматически изменяет размер в соответствии с его дочерним содержимым. Так что заставить его уменьшить расстояние между строками может помочь. - person maddy23285; 03.06.2019
comment
Измените свой вопрос с объяснением, чтобы OP и будущие посетители знали об этом. - person Heretic Monkey; 03.06.2019
comment
В случае ‹div› свойство css margin-top также принимает отрицательные значения, поэтому аналогичным образом вы можете нажать div для прохождения / перекрытия поля по умолчанию. - person maddy23285; 03.06.2019

arrow_upward
0
arrow_downward

сама ячейка также имеет отступы. Поэтому укажите «padding: 0» и «line-height: .9em» (90% размера шрифта).

td {
  border: 1px solid silver;
  padding:0;
  line-height:.9em;
}


body,
p {
  margin: 0;
}

td {
  border: 1px solid silver;
  vertical-align:top;
  line-height:.9em;
padding:0;

}

table {
  border-collapse: collapse;
    border: 1px solid;
   
}
<!DOCTYPE html>
<html>

<head>
  <title>Table Test</title>
</head>

<body>
  <table>
    <tr>
      <td>
        <p>
          First row
        </p>
      </td>
    </tr>
    <tr>
      <td>
        <p>
          Second row jygq
        </p>
      </td>
    </tr>
  </table>
</body>

</html>

person Mileesh M S    schedule 03.06.2019
comment
Попробуйте, это редко бывает хорошим ответом. Лучше объяснить, почему вы предлагаете код, присутствующий в ответе. - person Heretic Monkey; 03.06.2019
comment
Прости. Я добавил ссылку JSFiddle - person Mileesh M S; 03.06.2019
comment
Добавление ссылки JSFiddle было ортогональным тому, о чем я говорил :). Вы должны объяснить, как ваш код решает проблему OP. Обратите внимание, что вы можете использовать фрагменты стека вместо JSFiddle, если хотите предоставить работоспособный пример. - person Heretic Monkey; 03.06.2019
comment
Сама ячейка тоже дает отступ. Поэтому сбросьте его до нуля и уменьшите высоту строки до .9em (90% размера шрифта) - person Mileesh M S; 03.06.2019
comment
Измените свой вопрос с объяснением, чтобы OP и будущие посетители знали об этом. - person Heretic Monkey; 03.06.2019
comment
Я впервые использую переполнение стека. Извините за мое незнание - person Mileesh M S; 03.06.2019
comment
Не беспокойся! Я просто хочу убедиться, что ваш ответ самый лучший :). - person Heretic Monkey; 03.06.2019
comment
Спасибо за руководство. Я добавил фрагменты стека. :) - person Mileesh M S; 03.06.2019
comment
Большое спасибо, однако с line-height 0.9 некоторые символы могут быть обрезаны - возможно, есть более безопасное решение - person mjn; 03.06.2019
comment
@mjn, пожалуйста, посмотрите отрывок - person Mileesh M S; 03.06.2019
comment
Большое спасибо, пожалуйста, посмотрите мою правку - семейства шрифтов и размеры шрифтов заранее неизвестны, поэтому существует опасность, что фиксированные значения для высоты строки вызовут обрезанные символы. Также в ячейке может использоваться более одного шрифта. - person mjn; 03.06.2019
comment
Также вам нужно установить отступ 0 в ячейку @mjn - person Mileesh M S; 03.06.2019
comment
Обратите внимание, что значение высоты строки находится в em - @mjn - person Mileesh M S; 03.06.2019