Как отобразить таблицу внутри border-box?

Рейтинг: 0Ответов: 1Опубликовано: 25.06.2023

section {
  width: 90%;
  margin: 10px;
  border: 5px solid skyblue;
  padding: 10px;
}
<section>
  <h2>Soft Skills</h2>
  <table border=1>
    <tr>
      <th>Положительные</th>
      <th>Отрицательные</th>
    </tr>
    <tr>
      <td>
        <ol>
          <li>Креативность</li>
          <li>Коммуникабельность</li>
          <li>Ответственность</li>
          <li>Грамотная устная и письменная речь</li>
          <li>Нестандартное мышление</li>
        </ol>
      </td>
      <td>
        <ol>
          <li>Отсутствие опыта</li>
          <li>Прямолинейность</li>
          <li>Скурупулёзность</li>
        </ol>
      </td>
    </tr>
  </table>
</section>

css html вёрстка
Источник: Stack Overflow на русском

Ответы

▲ 1

Если только таблица должна находиться внутри border-box, то это можно сделать вот так:

table {
box-sizing: border-box;
width: 90%;
border: 5px solid skyblue;
padding: 10px;
}
td, th {
border: 1px solid black;
}
td {
vertical-align: top;
}
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>Таблица</title>
</head>
<body>
    <section>
  <h2>Soft Skills</h2>
  <table border=1>
    <tr>
      <th>Положительные</th>
      <th>Отрицательные</th>
    </tr>
    <tr>
      <td>
        <ol>
          <li>Креативность</li>
          <li>Коммуникабельность</li>
          <li>Ответственность</li>
          <li>Грамотная устная и письменная речь</li>
          <li>Нестандартное мышление</li>
        </ol>
      </td>
      <td>
        <ol>
          <li>Отсутствие опыта</li>
          <li>Прямолинейность</li>
          <li>Скрупулёзность</li>
        </ol>
      </td>
    </tr>
  </table>
</section>
</body>
</html>