CSS - właściwości table-layout


table-layout: auto

kod wynik kodu
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<meta http-equiv="Content-Language" content="pl">
<title>webatak.pl - CSS - table</title>
<link rel="Stylesheet" type="text/css" href="style.css" />
<style type="text/css">
table, td, th {
  border: 2px solid green;
  border-collapse: separate;
  width: 150px;
}
.auto {
  table-layout: auto;
}
 </style>
</head>
<body>

<h3>Najlepiej sprzedające się gry w historii (stan na maj 2020):</h3>
<table class="auto">
 <tr>
  <th>gra</th>
  <th>sprzedaż</th>
 </tr>
 <tr>
  <td>Minecraft</td>
  <td>200 mln egzemplarzy</td>
 </tr>
 <tr>
  <td>Grand Theft Auto V</td>
  <td>120 mln egzemplarzy</td>
 </tr>
</table>
</body>
</html>


table-layout: fixed

kod wynik kodu
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<meta http-equiv="Content-Language" content="pl">
<title>webatak.pl - CSS - table</title>
<link rel="Stylesheet" type="text/css" href="style.css" />
<style type="text/css">
table, td, th {
  border: 2px solid green;
  border-collapse: separate;
  width: 150px;
}
.fixed {
  table-layout: fixed;
}
 </style>
</head>
<body>

<h3>Najlepiej sprzedające się gry w historii (stan na maj 2020):</h3>
<table class="fixed">
 <tr>
  <th>gra</th>
  <th>sprzedaż</th>
 </tr>
 <tr>
  <td>Minecraft</td>
  <td>200 mln egzemplarzy</td>
 </tr>
 <tr>
  <td>Grand Theft Auto V</td>
  <td>120 mln egzemplarzy</td>
 </tr>
</table>
</body>
</html>