Блог

Главная - Вопросы по программированию - Строка таблицы не заполняет всю ширину таблицы

Строка таблицы не заполняет всю ширину таблицы

#html #css #html-table

#HTML #css #html-таблица

Вопрос:

Я создаю HTML-форму и у меня проблема с получением 2 строк столбцов для заполнения всей ширины таблицы. Я пытался использовать colspace и задать для него ширину, но это не работает. Я также попытался установить ширину на 100%, но это также не работает. CSS также, похоже, не вносит никаких изменений в 

 body {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}

table {
  width: 100%;
  table-layout: fixed;
}

.heading {
  text-align: center;
  font-weight: bold;
  padding: 5px;
  text-decoration: underline;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 25px;
}

.table-heading {
  text-align: center;
  padding: 20px;
  font-weight: bold;
  font-size: 14px;
  background-color: #8080802e;
}

.demographics {
  text-align: left;
}

table,
th,
td {
  border: 2px solid black;
  border-collapse: collapse;
  padding: 6px;
}  
 <img src="https://via.placeholder.com/150" />
<table>
  <tbody>
    <tr>
      <td class="table-heading" colspan="3">APPLICANT'S INFORMATION</td>
    </tr>
    <tr>
      <td>Last Name:</td>
      <td>First Name:</td>
      <td>Middle Intial:</td>
    </tr>
    <tr>
      <td colspan="2">Current Address:</td>
      <td>City:</td>
    </tr>
    <tr>
      <td>State:</td>
      <td>Zip Code:</td>
      <td>Phone #:</td>
    </tr>

    <tr>
      <td colspan="2">Spouse's Name:</td>
      <td>Phone #:</td>
    </tr>
    <tr>
      <td class="table-heading" colspan="3">CHILDREN'S INFORMATION (NO STEP CHILDREN)</td>
    </tr>
    <tr>
      <td>1)</td>
      <td>5)</td>
    </tr>
    <tr>
      <td>2)</td>
      <td>6)</td>
    </tr>
    <tr>
      <td>3)</td>
      <td>7)</td>
    </tr>
    <tr>
      <td>4)</td>
      <td>8)</td>
    </tr>
  </tbody>
</table>

Ответ №1:

Поскольку у вас есть строки с 1, 2 и 3 столбцами, вам нужно использовать colspan с числом, которое делится на все три числа, в данном случае на 6.

  • Для одного столбца в строке вы бы использовали colspan="6" , потому что 6/6 = 1
  • Для двух столбцов в строке, colspan="3" потому что 6/3 = 2
  • Для трех столбцов в строке, colspan="2" потому что 6/2 = 2

Вот HTML-код для таблицы с 1, 2 и 3 столбцами:

 <table>
  <tr>
    <td colspan="6">One Column</td>
  </tr>
  <tr>
    <td colspan="3">Two Column</td>
    <td colspan="3">Two Column</td>
  </tr>
  <tr>
    <td colspan="2">Three Column</td>
    <td colspan="2">Three Column</td>
    <td colspan="2">Three Column</td>
  </tr>
</table>

Ответ №2:

Используйте две отдельные таблицы.

 body {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}

table {
  width: 100%;
  table-layout: fixed;
}

.heading {
  text-align: center;
  font-weight: bold;
  padding: 5px;
  text-decoration: underline;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 25px;
}

.table-heading {
  text-align: center;
  padding: 20px;
  font-weight: bold;
  font-size: 14px;
  background-color: #8080802e;
}

.demographics {
  text-align: left;
}

table,
th,
td {
  border: 2px solid black;
  border-collapse: collapse;
  padding: 6px;
}
.no-border-top{
  border-top : 0
}  
 <img src="https://via.placeholder.com/150" />
<table>
  <tbody>
    <tr>
      <td class="table-heading" colspan="3">APPLICANT'S INFORMATION</td>
    </tr>
    <tr>
      <td>Last Name:</td>
      <td>First Name:</td>
      <td>Middle Intial:</td>
    </tr>
    <tr>
      <td colspan="2">Current Address:</td>
      <td>City:</td>
    </tr>
    <tr>
      <td>State:</td>
      <td>Zip Code:</td>
      <td>Phone #:</td>
    </tr>

    <tr>
      <td colspan="2">Spouse's Name:</td>
      <td>Phone #:</td>
    </tr>
  </tbody>
</table>
<table class="no-border-top">
  <tbody>
    <tr>
      <td class="table-heading no-border-top" colspan="2">CHILDREN'S INFORMATION (NO STEP CHILDREN)</td>
    </tr>
    <tr>
      <td>1)</td>
      <td>5)</td>
    </tr>
    <tr>
      <td>2)</td>
      <td>6)</td>
    </tr>
    <tr>
      <td>3)</td>
      <td>7)</td>
    </tr>
    <tr>
      <td>4)</td>
      <td>8)</td>
    </tr>
  </tbody>
</table>