Как я могу минимизировать верхний и нижний «отступы» для ячеек таблицы HTML? - PullRequest
Новая
       39

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

1 голос
/ 03 июня 2019

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

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

Какие еще опции 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, которая приводит к исчезновению «пропуска» между текстом и границей, и работает со всеми семействами шрифтов и размерами шрифтов (в одной ячейке может использоваться более одного шрифта).

Ответы [ 5 ]

1 голос
/ 03 июня 2019

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

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

0 голосов
/ 03 июня 2019

Сама ячейка также дает отступы. Поэтому укажите "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>
0 голосов
/ 03 июня 2019

Вы пытались добавить 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;
}

?

0 голосов
/ 03 июня 2019

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

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>
....
0 голосов
/ 03 июня 2019

Попробуйте: 

body,
p {
  margin: 0px;
}

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

table {
  border-collapse: collapse;
}

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

...