Создание неидентичных строк таблицы (таблица в таблице внутри таблицы) - PullRequest
Новая
       56

Создание неидентичных строк таблицы (таблица в таблице внутри таблицы)

0 голосов
/ 26 апреля 2019

У меня проблема с созданием неидентичной строки над той, что над ней. Я хочу одну строку с 3 ячейками и ниже той строки, которая распространяется до конца строки, и так далее, и так далее. Первый ряд - 3 ячейки, второй ряд - 1 длинная ячейка (равна трем выше по длине) и повтор.

Вот шаблон HTML & CSS, который я использовал 

#table {
  margin: 0px;
  margin-left: 585px;
  margin-top: 50px;
  z-index: 2;
  width: 385;
  border-collapse: collapse;
}

.divStyle {
  /* in charge of the scroller*/
  width: 385px;
  height: 428px;
  overflow: auto;
}

.innerTables {
  width: 360;
  border-collapse: collapse;
  vertical-align: middle;
}

.productionTable tr td {
  width: 360px;
  border: 2px solid black;
}

.innerTables tr td,
th {
  margin: 0px;
  padding: 0px;
  width: 120px;
}

.innerTables tr td {
  border: 1px solid black;
}
<table id='table'>
  <tr>
    <td>
      <table class='innerTables'>
        <tr>
          <th>Building</th>
          <th>Amount</th>
          <th>1 Per</th>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <div class='divStyle'>
        <table class='innerTables'>
          <tr>
            <td>Fishery</td>
            <td class='inputText' id="fishery"></td>
            <td>800 Farmers</td>
          </tr>
          <tr>
            <td colspan="0">
              <table class='productionTable'>
                <tr>
                  test
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </div>
    </td>
  </tr>
</table>

Я попытался использовать границу, чтобы указать, работает ли она или нет.

Это то, чего я пытаюсь достичь

Вот чего я добиваюсь

Ответы [ 4 ]

0 голосов
/ 29 апреля 2019

Вместо этого вы можете использовать атрибут colspan

<table id='table'>
    <tr>
        <td>
            <table class='innerTables'>
                <tr>
                    <th>Building</th>
                    <th>Amount</th>
                    <th>1 Per</th>
                </tr>
                <tr>
                    <td>Fishery</td>
                    <td class='inputText' id="fishery"></td>
                    <td>800 Farmers</td>
                </tr>
                <tr>
                  <td colspan="3">
                    Test
                  </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
0 голосов
/ 26 апреля 2019

Используйте colspan, чтобы увеличить ширину столбцов

Я сделал скрипку для вас https://jsfiddle.net/vzy97s2a/

                    <tr>
                      <td colspan="3">
                        wider
                      </td>
                    </tr>
0 голосов
/ 26 апреля 2019

Я бы сказал, используйте colspan="3" в качестве других ответов, но если вы хотите, чтобы он был динамическим, и вы не хотите добавлять colspan к каждой ячейке таблицы, вы можете попробовать использовать этот подход 

.row{
    display: flex;
}

.column{
    border: 1px solid red;
}

.table> .row:nth-child(odd) > .column{
    width: 33.3%;
    flex-grow: 1;
}

.table> .row:nth-child(even) > .column{
    width: 100%;
}
<div class="table">
    <div class="row">
        <div class="column">test</div>
        <div class="column">test</div>
        <div class="column">test</div>
    </div>
    <div class="row">
        <div class="column">test</div>
    </div>
    <div class="row">
        <div class="column">test</div>
        <div class="column">test</div>
        <div class="column">test</div>
    </div>
    <div class="row">
        <div class="column">test</div>
    </div>
</div>
0 голосов
/ 26 апреля 2019

Лучший способ сделать это - colspan или rowspan. Узнайте больше там https://www.w3schools.com/tags/att_td_rowspan.asp

<tr>
 <td colspan="3">
  <table class='productionTable'>
...