Как получить такой макет в таблице HTML - PullRequest
Новая
       0

Как получить такой макет в таблице HTML

1 голос
/ 11 февраля 2020

Я сделал простую адаптивную таблицу HTML, и я пытаюсь получить макет, как на картинке ниже:

enter image description here

Как вы можете видеть моя проблема с этим год столбец. Прямо сейчас мне нужно вставить пустой: 

 <th scope="row"></th>

Также у всего столбца есть граница из-за пустых тегов HTML.

Возможно ли получить макет, как на этой картинке, также это мой HTML: 

<div class="table-responsive">
    <table class="responsive-table  table-bordered ">
        <thead>
            <tr>
                <th scope="col">Year</th>
                <th scope="col">Short</th>
                <th scope="col">Exam</th>
                <th scope="col">P</th>
                <th scope="col">S</th>
                <th scope="col">A</th>
                <th scope="col">SJ</th>
                <th scope="col">TJ</th>
                <th scope="col">PK</th>
                <th scope="col">ECTS</th>
            </tr>
        </thead>
        <tbody>
            <tr>

                <th class="sem" scope="row">1</th>
                <td data-title="Short">Lor</td>
                <td data-title="Exam">Lorem</td>
                <td data-title="P">4</td>
                <td data-title="S">4</td>
                <td data-title="A">0</td>
                <td data-title="SJ">0</td>
                <td data-title="TJ">0</td>
                <td data-title="PK">0</td>
                <td data-title="ECTS">0</td>
            </tr>
            <tr>

                <th scope="row"></th>
                <td data-title="Short">MATM</td>
                <td data-title="Exam">Lorem (1/2)</td>
                <td data-title="P">4</td>
                <td data-title="S">4</td>
                <td data-title="A">0</td>
                <td data-title="SJ">0</td>
                <td data-title="TJ">0</td>
                <td data-title="PK">0</td>
                <td data-title="ECTS">0</td>
            </tr>
            <tr>

                <th scope="row"></th>
                <td data-title="Short">MATM</td>
                <td data-title="Exam">Lorem (1/2)</td>
                <td data-title="P">4</td>
                <td data-title="S">4</td>
                <td data-title="A">0</td>
                <td data-title="SJ">0</td>
                <td data-title="TJ">0</td>
                <td data-title="PK">0</td>
                <td data-title="ECTS">0</td>
            </tr>
            <tr>

                <th scope="row"></th>
                <td data-title="Short">MATM</td>
                <td data-title="Exam">Lorem</td>
                <td data-title="P">4</td>
                <td data-title="S">4</td>
                <td data-title="A">0</td>
                <td data-title="SJ">0</td>
                <td data-title="TJ">0</td>
                <td data-title="PK">0</td>
                <td data-title="ECTS">0</td>
            </tr>
            <tr>

                <th scope="row"></th>
                <td data-title="Short">MATM</td>
                <td data-title="Exam">Lorem (1/2)
                </td>
                <td data-title="P">4</td>
                <td data-title="S">4</td>
                <td data-title="A">0</td>
                <td data-title="SJ">0</td>
                <td data-title="TJ">0</td>
                <td data-title="PK">0</td>
                <td data-title="ECTS">0</td>
            </tr>
            <tr>

                <th scope="row"></th>
                <td data-title="Short">MATM</td>
                <td data-title="Exam">Lorem (1/2)</td>
                <td data-title="P">4</td>
                <td data-title="S">4</td>
                <td data-title="A">0</td>
                <td data-title="SJ">0</td>
                <td data-title="TJ">0</td>
                <td data-title="PK">0</td>
                <td data-title="ECTS">0</td>
            </tr>
            <tr>

                <th scope="row"></th>
                <td data-title="Short">MATM</td>
                <td data-title="Exam">Lorem (1/2)</td>
                <td data-title="P">4</td>
                <td data-title="S">4</td>
                <td data-title="A">0</td>
                <td data-title="SJ">0</td>
                <td data-title="TJ">0</td>
                <td data-title="PK">0</td>
                <td data-title="ECTS">0</td>
            </tr>
            <tr>

                <th class="sem" scope="row"></th>
                <td data-title="Short">-</td>
                <td data-title="Exam">Lorem: 1</td>
                <td data-title="P">-</td>
                <td data-title="S">-</td>
                <td data-title="A">-</td>
                <td data-title="SJ">-</td>
                <td data-title="TJ">-</td>
                <td data-title="PK">-</td>
                <td data-title="ECTS">-
                </td>
            </tr>
            <tr>

                <th scope="row"></th>
                <td data-title="Short">-</td>
                <td data-title="Exam">Lorem: 1</td>
                <td data-title="P">-</td>
                <td data-title="S">-</td>
                <td data-title="A">-</td>
                <td data-title="SJ">-</td>
                <td data-title="TJ">-</td>
                <td data-title="PK">-</td>
                <td data-title="ECTS">-
                </td>
            </tr>
        </tbody>
    </table>
</div>

А вот мой jsfiddle: https://jsfiddle.net/r6jqvk4s/1/

Ответы [ 2 ]

0 голосов
/ 11 февраля 2020

Мой совет: используйте фреймворк (он упрощает работу). Вот пример использования Materialize (https://materializecss.com/table.html).

Примечание: в этом примере все файлы находятся в одной папке

код для responseiveTable. html is ниже: 

<html>
<head>
<link rel="stylesheet" type="text/css" href="materialize.min.css">    
<link rel="stylesheet" type="text/css" href="personalize.css">    
<script type="text/javascript" src= "materialize.min.js"></script>    
</head>
<body>

<table class="highlight">
<thead class="corBackgroundThead">
<tr>
<th scope="col">Year</th>
<th scope="col">Short</th>
<th scope="col">Exam</th>
<th scope="col">P</th>
<th scope="col">S</th>
<th scope="col">A</th>
<th scope="col">SJ</th>
<th scope="col">TJ</th>
<th scope="col">PK</th>
<th scope="col">ECTS</th>
</tr>
</thead>

<tbody>
<tr>
<th class="sem" scope="row"></th>
<td data-title="Short">Lor</td>
<td data-title="Exam">Lorem</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<th scope="row"></th>
<td data-title="Short">MATM</td>
<td data-title="Exam">Lorem (1/2)</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<th scope="row"></th>
<td data-title="Short">MATM</td>
<td data-title="Exam">Lorem (1/2)</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
</tbody>
</table>
</body>
</html>

код для персонализации. css ниже:

thead th {background-color: # 607c8a! Важно}

Вы можете загрузить materialize.min. css и materialize.min. js файлы по ссылке ниже: https://github.com/Dogfalo/materialize/releases/download/1.0.0/materialize-v1.0.0.zip

Результат, который вы получите: отзывчивая (выделенная) таблица

0 голосов
/ 11 февраля 2020

Вы можете использовать javascript для подсчета ваших tr потомков и затем вставить атрибут rowspan с найденным значением count: 

var tbody = document.querySelector('tbody');// look for tbody
var thscoped = document.querySelector('tbody .sem');// look for the th.sem inside tbody
var count = 0;
for (var ch = tbody.firstChild; ch; ch = ch.nextSibling)// will find tr
  if (ch instanceof HTMLElement) count++; // will count them

thscoped.setAttribute("rowspan", count); // insert the rowspan attribute once count is done
/* SEE ME */
.sem {border:solid;}
<div class="table-responsive">
  <table class="responsive-table  table-bordered ">
    <thead>
      <tr>
        <th scope="col">Year</th>
        <th scope="col">Short</th>
        <th scope="col">Exam</th>
        <th scope="col">P</th>
        <th scope="col">S</th>
        <th scope="col">A</th>
        <th scope="col">SJ</th>
        <th scope="col">TJ</th>
        <th scope="col">PK</th>
        <th scope="col">ECTS</th>
      </tr>
    </thead>
    <tbody>
      <tr>

        <th class="sem" scope="row">1</th>
        <td data-title="Short">Lor</td>
        <td data-title="Exam">Lorem</td>
        <td data-title="P">4</td>
        <td data-title="S">4</td>
        <td data-title="A">0</td>
        <td data-title="SJ">0</td>
        <td data-title="TJ">0</td>
        <td data-title="PK">0</td>
        <td data-title="ECTS">0</td>
      </tr>
      <tr>


        <td data-title="Short">MATM</td>
        <td data-title="Exam">Lorem (1/2)</td>
        <td data-title="P">4</td>
        <td data-title="S">4</td>
        <td data-title="A">0</td>
        <td data-title="SJ">0</td>
        <td data-title="TJ">0</td>
        <td data-title="PK">0</td>
        <td data-title="ECTS">0</td>
      </tr>
      <tr>


        <td data-title="Short">MATM</td>
        <td data-title="Exam">Lorem (1/2)</td>
        <td data-title="P">4</td>
        <td data-title="S">4</td>
        <td data-title="A">0</td>
        <td data-title="SJ">0</td>
        <td data-title="TJ">0</td>
        <td data-title="PK">0</td>
        <td data-title="ECTS">0</td>
      </tr>
      <tr>


        <td data-title="Short">MATM</td>
        <td data-title="Exam">Lorem</td>
        <td data-title="P">4</td>
        <td data-title="S">4</td>
        <td data-title="A">0</td>
        <td data-title="SJ">0</td>
        <td data-title="TJ">0</td>
        <td data-title="PK">0</td>
        <td data-title="ECTS">0</td>
      </tr>
      <tr>


        <td data-title="Short">MATM</td>
        <td data-title="Exam">Lorem (1/2)
        </td>
        <td data-title="P">4</td>
        <td data-title="S">4</td>
        <td data-title="A">0</td>
        <td data-title="SJ">0</td>
        <td data-title="TJ">0</td>
        <td data-title="PK">0</td>
        <td data-title="ECTS">0</td>
      </tr>
      <tr>


        <td data-title="Short">MATM</td>
        <td data-title="Exam">Lorem (1/2)</td>
        <td data-title="P">4</td>
        <td data-title="S">4</td>
        <td data-title="A">0</td>
        <td data-title="SJ">0</td>
        <td data-title="TJ">0</td>
        <td data-title="PK">0</td>
        <td data-title="ECTS">0</td>
      </tr>
      <tr>


        <td data-title="Short">MATM</td>
        <td data-title="Exam">Lorem (1/2)</td>
        <td data-title="P">4</td>
        <td data-title="S">4</td>
        <td data-title="A">0</td>
        <td data-title="SJ">0</td>
        <td data-title="TJ">0</td>
        <td data-title="PK">0</td>
        <td data-title="ECTS">0</td>
      </tr>
      <tr>


        <td data-title="Short">-</td>
        <td data-title="Exam">Lorem: 1</td>
        <td data-title="P">-</td>
        <td data-title="S">-</td>
        <td data-title="A">-</td>
        <td data-title="SJ">-</td>
        <td data-title="TJ">-</td>
        <td data-title="PK">-</td>
        <td data-title="ECTS">-
        </td>
      </tr>
      <tr>


        <td data-title="Short">-</td>
        <td data-title="Exam">Lorem: 1</td>
        <td data-title="P">-</td>
        <td data-title="S">-</td>
        <td data-title="A">-</td>
        <td data-title="SJ">-</td>
        <td data-title="TJ">-</td>
        <td data-title="PK">-</td>
        <td data-title="ECTS">-
        </td>
      </tr>
    </tbody>
  </table>
</div>

jsfiddle обновлено https://jsfiddle.net/34198okz/

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

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

...