Как отформатировать таблицу в CSS так, чтобы строка определенных столбцов сместилась вниз на расстояние, равное половине их высоты строки? - PullRequest
Новая
       1

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

0 голосов
/ 09 июля 2020

Вероятно, решения не существует или это трудно расколоть. У меня есть таблица с таким кодом: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
    table {
        font-family: verdana,arial,sans-serif;
        font-size:11px;
        color:#333333;
        border-width: 1px;
        border-color: #3A3A3A;
        border-collapse: collapse;
    }
    table th {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #3A3A3A;
        background-color: #B3B3B3;
    }
    table td {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #3A3A3A;
        background-color: #ffffff;
    }
</style>

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

<body>

<table>
<thead>
    <tr><th>boundary</th><th>slice</th><th>h_i</th><th>1/2 (h_{i+1}+h_i)</th></tr>
</thead>

<tbody>
    <tr><td>0</td><td></td><td>0.00</td><td></td></tr>
    <tr><td>1</td><td>1</td><td>2.26</td><td>1.13</td></tr>
    <tr><td>2</td><td>2</td><td>4.37</td><td>3.32</td></tr>
    <tr><td>3</td><td>3</td><td>6.32</td><td>5.35</td></tr>
    <tr><td>4</td><td>4</td><td>5.74</td><td>6.03</td></tr>
    <tr><td>5</td><td>5</td><td>4.90</td><td>5.32</td></tr>
    <tr><td>6</td><td>6</td><td>3.61</td><td>4.25</td></tr>
    <tr><td>7</td><td>7</td><td>0.00</td><td>1.80</td></tr>
</tbody>
</table>

</body>
</html>

Я хочу, чтобы таблица была отформатирована в CSS, чтобы строки, принадлежащие нечетным столбцам, были сдвинуты вниз на половину своей высоты. Как показано на следующем изображении. Форматирование таблицы для смещения строк вниз

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

Задача здесь состоит в том, чтобы получить решение с чистым форматированием с CSS, если решение существует.

1 Ответ

0 голосов
/ 09 июля 2020

Вы можете использовать преобразование: 

table {
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  color: #333333;
  border-width: 1px;
  border-color: #3A3A3A;
  border-collapse: collapse;
}
table th {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #3A3A3A;
  background-color: #B3B3B3;
}
table td {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #3A3A3A;
  background-color: #ffffff;
}

:empty {
  opacity:0;
}

tbody tr td:nth-child(even) {
  transform: translateY(-50%);
  box-shadow:0 0 0 1px #3a3a3a
}
<table>
  <thead>
    <tr>
      <th>boundary</th>
      <th>slice</th>
      <th>h_i</th>
      <th>1/2 (h_{i+1}+h_i)</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>0</td>
      <td></td>
      <td>0.00</td>
      <td></td>
    </tr>
    <tr>
      <td>1</td>
      <td>1</td>
      <td>2.26</td>
      <td>1.13</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
      <td>4.37</td>
      <td>3.32</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3</td>
      <td>6.32</td>
      <td>5.35</td>
    </tr>
    <tr>
      <td>4</td>
      <td>4</td>
      <td>5.74</td>
      <td>6.03</td>
    </tr>
    <tr>
      <td>5</td>
      <td>5</td>
      <td>4.90</td>
      <td>5.32</td>
    </tr>
    <tr>
      <td>6</td>
      <td>6</td>
      <td>3.61</td>
      <td>4.25</td>
    </tr>
    <tr>
      <td>7</td>
      <td>7</td>
      <td>0.00</td>
      <td>1.80</td>
    </tr>
  </tbody>
</table>

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

td:empty {
  opacity: 0;
}

table {
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  color: #333333;
  border-width: 1px;
  border-color: #3A3A3A;
  border-collapse: collapse;
}

table th {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #3A3A3A;
  background-color: #B3B3B3;
}

table td {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #3A3A3A;
  background-color: #ffffff;
}

:empty {
  opacity: 0;
}
<table>
  <thead>
    <tr>
      <th>boundary</th>
      <th>slice</th>
      <th>h_i</th>
      <th>1/2 (h_{i+1}+h_i)</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td rowspan=2>0</td>
      <td></td>
      <td rowspan=2>0.00</td>
      <td></td>
    </tr>
    <tr>
      <td rowspan=2>1</td>

      <td rowspan=2>2.26</td>

    </tr>
    <tr>
      <td rowspan=2>1</td>
      <td rowspan=2>1.13</td>
    </tr>
    <tr>
      <td rowspan=2>2</td>
      <td rowspan=2>4.37</td>
    </tr>
    <tr>
      <td rowspan=2>2</td>
      <td rowspan=2>3.32</td>

    </tr>
    <tr>
      <td rowspan=2>3</td>
      <td rowspan=2>6.32</td>
    </tr>
    <tr>
      <td rowspan=2>3</td>
      <td rowspan=2>5.35</td>

    </tr>
    <tr>
      <td rowspan=2>4</td>
      <td rowspan=2>5.74</td>
    </tr>
    <tr>
      <td rowspan=2>4</td>
      <td rowspan=2>6.03</td>
    </tr>
    <tr>
      <td rowspan=2>5</td>
      <td rowspan=2>4.90</td>
    </tr>
    <tr>
      <td rowspan=2>5</td>
      <td rowspan=2>5.32</td>
    </tr>
    <tr>
      <td rowspan=2>6</td>
      <td rowspan=2>3.61</td>
    </tr>
    <tr>
      <td rowspan=2>6</td>
      <td rowspan=2>4.25</td>
    </tr>
    <tr>
      <td rowspan=2>7</td>
      <td rowspan=2>0.00</td>
    </tr>
    <tr>
      <td rowspan=2>7</td>
      <td rowspan=2>1.80</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

https://html.com/tables/rowspan-colspan/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...