Необходимо воспроизвести конкретную c HTML таблицу - PullRequest
Новая
       0

Необходимо воспроизвести конкретную c HTML таблицу

1 голос
/ 29 января 2020

Я должен воспроизвести это изображение http://www.sahmreviews.com/wp-content/uploads/2015/08/FoxMind-Kulami-Board-Setup.jpg в виде таблицы HTML, где все td имеют атрибуты colspan и rowspan set, но из-за пустой строки и другой таблицы таблица сжата, есть ли способ это исправить? Если я добавлю еще одну строку и другой столбец, он будет работать, как на изображении https://imgur.com/AZKhlWf, но я должен скрыть строку и столбец. Вы знаете, есть ли способ исправить это?

Таблица & css выглядит следующим образом: 

table,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  height: 50px;
  width: 50px;
}
<table>
  <tr>
    <td colspan="2" rowspan="2"></td>
    <td rowspan="3"></td>
    <td colspan="3"></td>
    <td colspan="2" rowspan="3"></td>
  </tr>

  <tr>

    <td colspan="2" rowspan="2"></td>
    <td rowspan="2"></td>
  </tr>

  <tr>
    <td colspan="2" rowspan="2"></td>
  </tr>

  <tr>
    <td colspan="3" rowspan="2"></td>
    <td colspan="3"></td>
  </tr>

  <tr>
    <td colspan="2"></td>
    <td colspan="2" rowspan="2"></td>
    <td rowspan="2"></td>
  </tr>

  <tr>
    <td rowspan="3"></td>
    <td colspan="2" rowspan="3"></td>
    <td colspan="2"></td>
  </tr>

  <tr>
    <td colspan="3" rowspan="2"></td>
    <td colspan="2" rowspan="2"></td>
  </tr>

  <tr>
  </tr>
</table>

1 Ответ

1 голос
/ 30 января 2020

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

table {
  border: 1px solid #888;
  border-collapse: collapse;
  background-color: #f5e7d1;
}

td {
  height: 40px;
  width: 40px;
}

td.br {
  border-right: 1px solid #888;
}

td.bb {
  border-bottom: 1px solid #888;
}

td > label > input { display : none; }
td > label > span { 
  border: 1px solid #CCC;
  background: radial-gradient(circle, rgba(197,199,163,1) 0%, rgba(255,255,255,1) 100%);
  border-radius: 50%;
  width: 50%;
  height: 50%;
  display: block;
  margin: auto;
}
td > label {
  cursor: pointer;
}
td > label > input:checked + span {
  background: radial-gradient(circle, rgba(255,0,0,1) 0%, rgba(255,100,102,1) 100%);
  border-color: #F09;
}
<table>
  <tbody>
    <tr>
      <td class=""><label><input type="checkbox"><span></span></label></td>
      <td class="br"><label><input type="checkbox"><span></span></label></td>
      <td class="br"><label><input type="checkbox"><span></span></label></td>
      <td class="bb"><label><input type="checkbox"><span></span></label></td>
      <td class="bb"><label><input type="checkbox"><span></span></label></td>
      <td class="br bb"><label><input type="checkbox"><span></span></label></td>
      <td class=""><label><input type="checkbox"><span></span></label></td>
      <td class=""><label><input type="checkbox"><span></span></label></td>
    </tr>
    <tr>
      <td class="bb"><label><input type="checkbox"><span></span></label></td>
      <td class="br bb"><label><input type="checkbox"><span></span></label></td>
      <td class="br"><label><input type="checkbox"><span></span></label></td>
      <td class=""><label><input type="checkbox"><span></span></label></td>
      <td class="br"><label><input type="checkbox"><span></span></label></td>
      <td class="br"><label><input type="checkbox"><span></span></label></td>
      <td class=""><label><input type="checkbox"><span></span></label></td>
      <td class=""><label><input type="checkbox"><span></span></label></td>
    </tr>
    <tr>
      <td class=""><label><input type="checkbox"><span></span></label></td>
      <td class="br"><label><input type="checkbox"><span></span></label></td>
      <td class="br bb"><label><input type="checkbox"><span></span></label></td>
      <td class="bb"><label><input type="checkbox"><span></span></label></td>
      <td class="br bb"><label><input type="checkbox"><span></span></label></td>
      <td class="br bb"><label><input type="checkbox"><span></span></label></td>
      <td class="bb"><label><input type="checkbox"><span></span></label></td>
      <td class="bb"><label><input type="checkbox"><span></span></label></td>
    </tr>
    <tr>
      <td class="bb"><label><input type="checkbox"><span></span></label></td>
      <td class="br bb"><label><input type="checkbox"><span></span></label></td>
      <td class=""><label><input type="checkbox"><span></span></label></td>
      <td class=""><label><input type="checkbox"><span></span></label></td>
      <td class="br"><label><input type="checkbox"><span></span></label></td>
      <td class="bb"><label><input type="checkbox"><span></span></label></td>
      <td class="bb"><label><input type="checkbox"><span></span></label></td>
      <td class="bb"><label><input type="checkbox"><span></span></label></td>
    </tr>
    <tr>
      <td class="bb"><label><input type="checkbox"><span></span></label></td>
      <td class="br bb"><label><input type="checkbox"><span></span></label></td>
      <td class="bb"><label><input type="checkbox" checked><span></span></label></td>
      <td class="bb"><label><input type="checkbox"><span></span></label></td>
      <td class="br bb"><label><input type="checkbox"><span></span></label></td>
      <td class=""><label><input type="checkbox"><span></span></label></td>
      <td class="br"><label><input type="checkbox"><span></span></label></td>
      <td class=""><label><input type="checkbox"><span></span></label></td>
    </tr>
    <tr>
      <td class="br"><label><input type="checkbox"><span></span></label></td>
      <td class=""><label><input type="checkbox"><span></span></label></td>
      <td class="br"><label><input type="checkbox"><span></span></label></td>
      <td class="bb"><label><input type="checkbox"><span></span></label></td>
      <td class="br bb"><label><input type="checkbox"><span></span></label></td>
      <td class="bb"><label><input type="checkbox"><span></span></label></td>
      <td class="br bb"><label><input type="checkbox"><span></span></label></td>
      <td class="bb"><label><input type="checkbox"><span></span></label></td>
    </tr>
    <tr>
      <td class="br"><label><input type="checkbox"><span></span></label></td>
      <td class=""><label><input type="checkbox"><span></span></label></td>
      <td class="br"><label><input type="checkbox"><span></span></label></td>
      <td class=""><label><input type="checkbox"><span></span></label></td>
      <td class=""><label><input type="checkbox"><span></span></label></td>
      <td class="br"><label><input type="checkbox"><span></span></label></td>
      <td class=""><label><input type="checkbox"><span></span></label></td>
      <td class=""><label><input type="checkbox"><span></span></label></td>
    </tr>
    <tr>
      <td class="br"><label><input type="checkbox"><span></span></label></td>
      <td class=""><label><input type="checkbox"><span></span></label></td>
      <td class="br"><label><input type="checkbox"><span></span></label></td>
      <td class=""><label><input type="checkbox"><span></span></label></td>
      <td class=""><label><input type="checkbox"><span></span></label></td>
      <td class="br"><label><input type="checkbox"><span></span></label></td>
      <td class=""><label><input type="checkbox"><span></span></label></td>
      <td class=""><label><input type="checkbox"><span></span></label></td>
    </tr>
  </tbody>
</table>
...