CSS Tables

table {
  width: 100%;
}

th {
  height: 50px;
}

Width and height of a table are defined by the width and height properties.

//the following example left-aligns the text in <th> elements

th {
  text-align: left;
}

The text-align property sets the horizontal alignment (like left, right, or center) of the content in <th> or <td>.

By default, the content of &lt;th&gt; elements are center-aligned and the content of &lt;td&gt; elements are left-aligned.

<pre><code>//the following example sets the vertical text alignment to bottom for &lt;td&gt; elements

td {
  height: 50px;
  vertical-align: bottom;
}</code></pre>

The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content in <th> or <td>.

By default, the vertical alignment of the content in a table is middle (for both <th> and <td> elements).

th, td {
  padding: 15px;
  text-align: left;
}

To control the space between the border and the content in a table, use the padding property on <td> and <th> elements.

th, td {
  border-bottom: 1px solid #ddd;
}

Add the border-bottom property to <th> and <td> for horizontal dividers.

tr:hover {background-color: #f5f5f5;}

Use the :hover selector on <tr> to highlight table rows on mouse over.

tr:nth-child(even) {background-color: #f2f2f2;}

For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows.

<pre><code>&lt;div style=&quot;overflow-x:auto;&quot;&gt;

&lt;table&gt;
... table content ...
&lt;/table&gt;

&lt;/div&gt;</code></pre>

A responsive table will display a horizontal scroll bar if the screen is too small to display the full content.

Add a container element (like <div>) with overflow-x:auto around the <table> element to make it responsive.