主页 / 问题 / 1436773
Accepted
Михаил Камахин
Asked:2022-08-06 17:43:45 +0000 UTC2022-08-06 17:43:45 +0000 UTC

html表格行跨度

  • 772

我需要做一张这样的桌子

在此处输入图像描述

但结果是这样的

在此处输入图像描述

我不明白我做错了什么

.table {
  border-collapse: collapse;
}

.table td,
.table th {
  border: 2px solid black;
  padding: 10px;
}
<table class="table">

  <thead>
    <tr>
      <th colspan="3">
        Форма для отправки фотографии на сайт
      </th>
    </tr>
  </thead>

  <tbody>

    <tr>
      <th rowspan="5">Автор фотографии</th>
      <td rowspan="2">Фамилия И.О.</td>
      <td rowspan="2">
        <input type="text" placeholder="Введите ваше имя">
      </td>
    </tr>

    <tr>
      <td rowspan="2">Пол</td>
      <td>
        <label>
          <input type="radio" name="gender" id="">
          Женский
        </label>
      </td>
    </tr>

    <tr>
      <td>
        <label>
          <input type="radio" name="gender" id="">
          Мужской
        </label>
      </td>
    </tr>

    <tr>
      <td>Страна</td>
      <td>
        <select name="country">
          <option value="Россия">Россия</option>
          <option value="США">США</option>
        </select>
      </td>
    </tr>

  </tbody>

</table>

我以为线条应该这样排列

在此处输入图像描述

html table

1 个回答

  1. Best Answer

    例子

    按列

    1 tbody row-td(rowspan5) td td

    2 tbody row- td(rowspan2) td

    3 tbody row- td

    4 tbody row- td td

    .table {
  border-collapse: collapse;
  width: 100%;
}

.table td,
.table th {
  border: 2px solid black;
  padding: 10px;
  font-size: 1.2em;
}

.td-family {
  height: 70px;
}
    <table class="table">
  <thead>
    <tr>
      <th colspan="3">
        Форма для отправки фотографии на сайт
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="4"><strong>Автор фотографии</strong></td>
      <td class="td-family">Фамилия И.О.</td>
      <td><input type="text" placeholder="Введите ваше имя"></td>
    </tr>
    <tr>
      <td rowspan="2">Пол</td>
      <td>
        <label>
          <input type="radio" name="gender" id="">
          Женский
        </label>
      </td>
    </tr>
    <tr>
      <td>
        <label>
          <input type="radio" name="gender" id="">
          Мужской
        </label>
      </td>
    </tr>
    <tr>
      <td>Страна</td>
      <td>
        <select name="country">
          <option value="Россия">Россия</option>
          <option value="США">США</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

    • 1

相关问题