Как создать таблицу полной ширины HTML с границами?

Question

Текущее HTML:

    <section class="Product-Info">
      <table>
        <tr>
          <th colspan="2">Product Infromation</th>
        </tr>
        <tr>
          <th>Product Name:</th>
          <td>Name</td>
        </tr>
        <tr>
          <th>Product Description:</th>
          <td>Description</td>
        </tr>
      </table>
    </section>

Желательно:

Вопрос:

Как мне добавить границы и ширину к моему текущему HTML с CSS в качестве желаемого результата?

Что я пробовал

Я пробовал следующее css:

  table {
    border: 1px solid black;
  }

Это просто помещает рамку вокруг стола. Как я могу добавить его по желанию?

Answer 1

Я бы go со следующим:

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

.Product-Info > table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  text-align: center;
}

.Product-Info tr > *:first-child {
  background: blue;
  color: white;
  text-align: left;
}

.w-25 {
  width: 25% !important;
  max-width: 25% !important;
}

.text-center {
  text-align: center !important;
}

<section class="Product-Info">
  <table>
    <colgroup>
      <col class="w-25 blue">
      <col class="">
    </colgroup>
    <tr>
      <th colspan="2" class="text-center">Product Infromation</th>
    </tr>
    <tr>
      <th class="text-left">Product Name:</th>
      <td class="text-center">Name</td>
    </tr>
    <tr>
      <th class="text-left">Product Description:</th>
      <td class="text-center">Description</td>
    </tr>
  </table>
</section>

Answer 2

Дополнительная информация (фрагмент «копировать-вставить» в ответе @ Random-COSMOS).

Таблица - это block-level элемент

«Элемент уровня блока всегда начинается на новой строке и занимает всю доступную ширину. https://www.w3schools.com/html/html_blocks.asp "

Установите любую ширину таблицы (400 пикселей или 30%) ==> 100% в вашем случае (100% от его родителя).

<table style="width: 100%;">

Чтобы указать границы таблицы в CSS, используйте свойство border.

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

Out of topi c - Доступные таблицы

Для веб-доступности => Добавить связь между заголовком и ячейками данных (scope = "row" / scope = "col"). Полная статья: https://www.w3.org/WAI/tutorials/tables/two-headers/

<table>
  <tr>
    <th scope="col" colspan="2">Product Infromation</th>
  </tr>
  <tr>
    <th scope="row">Product Name:</th>
    <td>Some Name</td>
  </tr>
  <tr>
    <th scope="row">Product Description:</th>
    <td>Some Description</td>
  </tr>
</table>

Answer 3

Довольно просто, в вашем примере вам просто нужно применить желаемый цвет фона к ячейкам заголовка таблицы (th), например:

    th {
    background: darkblue;
    color: white; /* Assuming you don't want black text on dark blue. */ 
    }

Чтобы стандартная граница вокруг ячеек таблицы исчезла с вас нужно просто свернуть границу основного элемента таблицы, например:

    table {
    border-collapse: collapse;
    }

С этим набором теперь вы можете применить любой стиль границы, который вы хотите, к своей таблице, любой толщины, цвета и стиля.

Answer 4

table {
  border-collapse: collapse;
  /* if you don't add this line you will see "double" borders */
  border: 1px solid black;
  width: 100vw;
}

th{
color: white;
background-color: blue;
}

td{
background-color: white;
width: 70%;
}

td, th {
  border: 1px solid black;
}

<section class="Product-Info">
  <table>
    <tr>
      <th colspan="2">Product Infromation</th>
    </tr>
    <tr>
      <th>Product Name:</th>
      <td>Name</td>
    </tr>
    <tr>
      <th>Product Description:</th>
      <td>Description</td>
    </tr>
  </table>
</section>

Вот, ваш фрагмент!

Answer 5

надеюсь, это поможет вам

section {
width:100wh;

}
table{
width:100%
}

<section class="Product-Info">
      <table border="1">
        <tr>
          <th colspan="2">Product Infromation</th>
        </tr>
        <tr>
          <td>Product Name:</td>
          <td >Name</td>
        </tr>
        <tr>
          <td  > Product Description:</td>
          <td  >Description</td>
        </tr>
      </table>
    </section>

Answer 6

просто это:

table {
border-collapse: collapse; /* if you don't add this line you will see "double" borders */
border: 1px solid black;
}

table th,
table td {
text-align: left;
border: 1px solid black;
}

демо здесь https://jsfiddle.net/3hpks1mL/