Prev Next

CSS Table Size

Controlling the width and height of tables (and their cells) helps ensure consistent layout. Setting width in percentages allows tables to adapt to different screen sizes, while fixed widths in pixels offer more predictable layouts. Adjusting cell width and height can improve data readability.

Key Topics

Width & Height

width: 100%; makes a table fill its container. Set widths on th or td for specific column sizing. Height can be influenced by content, but can also be fixed if desired.

Responsive Tables

On smaller screens, consider techniques like horizontal scrolling or transforming tables into cards. Pure CSS options are limited, but controlling width helps avoid overflow issues.

<style>
    table {
        width: 100%;
        table-layout: fixed;
    }
    th, td {
        width: 50%;
        border: 1px solid #000;
    }
</style>
<table>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
    </tr>
    <tr>
        <td>Data A</td>
        <td>Data B</td>
    </tr>
</table>

Explanation: Setting a fixed layout and column widths ensures a more predictable structure, especially when dealing with large datasets.

Key Takeaways

  • Control: Width and height settings make tables more organized.
  • Responsive: Use percentages for flexible layouts.
  • Predictability: Fixed layouts ensure consistent column sizes.
Prev Next