Creating a table that adjusts its columns to match the same width percentages for a responsive design

Question

Creating a table that adjusts its columns to match the same width percentages for a responsive design

Three tables were created with identical column names. The HTML markup for each table is consistent. When viewed on a laptop browser, the tables display correctly as depicted in this screenshot:

https://i.sstatic.net/5BAdg.png

However, when viewed on a smaller screen (mobile device), the widths of the tables are distorted:

https://i.sstatic.net/8coWv.png

The issue arises because the second and third tables have longer column names compared to the first table. How can I ensure that all tables have the same width when viewed on a mobile phone? What CSS code do I need to achieve this? Thank you in advance for your help.

The code snippet is provided below:

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}
th,
td {
  text-align: left;
  padding: 8px;
}
tr:nth-child(even) {
  background-color: #f2f2f2
}

<div style="overflow-x:auto;">
  <table>
    <tr>
      <th style="width: 15%">First Name</th>
      <th style="width: 15%">Last Name</th>
      <th style="width: 7%">Points</th>
      ...

html css html-table responsive

Answer 1

Answer №1

The problem arises from the use of percentage-based width.

 <th style="width: 15%">Points</th>

Due to different screen sizes, a percentage value will result in varying absolute widths. To maintain consistency across all screens, it's recommended to set a fixed value instead.

 <th style="width: 10rem">Points</th>

Please note that the choice of 10rem is arbitrary and requires experimentation.

This is because percentage-based width cascades down. The table width relies on screen size, influencing cell widths as well.

You can also establish a minimum width to lock it at, for example, 10rem but allow growth up to 15% of the table's width beyond that.

table {
  width: 100%;
}
th {
  min-width: 10rem;
  width: 15%;
}
td, th {
  border: 1px solid;
}

<table>
  <tbody>
    <tr>
      <th>first</th>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>b</td>
      <td>d</td>
    </tr>
    <tr>
      <th>second</th>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>b</td>
      <td>d</td>
    </tr>
    <tr>
      <th>third</th>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>b</td>
      <td>d</td>
    </tr>
  </tbody>
</table>

Answer 2

The problem arises from the use of percentage-based width.

 <th style="width: 15%">Points</th>

Due to different screen sizes, a percentage value will result in varying absolute widths. To maintain consistency across all screens, it's recommended to set a fixed value instead.

 <th style="width: 10rem">Points</th>

Please note that the choice of 10rem is arbitrary and requires experimentation.

This is because percentage-based width cascades down. The table width relies on screen size, influencing cell widths as well.

You can also establish a minimum width to lock it at, for example, 10rem but allow growth up to 15% of the table's width beyond that.

table {
  width: 100%;
}
th {
  min-width: 10rem;
  width: 15%;
}
td, th {
  border: 1px solid;
}

<table>
  <tbody>
    <tr>
      <th>first</th>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>b</td>
      <td>d</td>
    </tr>
    <tr>
      <th>second</th>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>b</td>
      <td>d</td>
    </tr>
    <tr>
      <th>third</th>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>b</td>
      <td>d</td>
    </tr>
  </tbody>
</table>

Answer 3

Answer №2

First and foremost, it is advisable not to embed styles directly in the HTML elements. It would be more efficient to create a separate CSS file and link it to your HTML page, or include all CSS within the header section. Take a look at the sample codes below, make necessary adjustments, and consider using media queries for different screen sizes.

Don't forget to include this meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Next, define the styles in the header:

<style type="text/css">
    .table-header{
        min-width: 80px;
        text-align: left;

    }
    .tables {
        width: 100%;
        margin-bottom: 30px;
    }
</style>

After that, apply the CSS classes to tables and table headers:

<table class="tables">

    <tr>
  <th class="table-header">First Name</th>
  <th class="table-header">Last Name</th>
  <th class="table-header">Points</th>
  <th class="table-header">Points</th>
  <th class="table-header">Points</th>
  <th class="table-header">Points</th>
  <th class="table-header">Points</th>
  <th class="table-header">Points</th>
  <th class="table-header">Points</th>
  <th class="table-header">Points</th>
  <th class="table-header">Points</th>
  <th class="table-header">Points</th>
</tr>

Lastly, note that the provided code snippet is only for a specific screen size. To ensure compatibility with various screens, utilize CSS media queries.

Answer 4

First and foremost, it is advisable not to embed styles directly in the HTML elements. It would be more efficient to create a separate CSS file and link it to your HTML page, or include all CSS within the header section. Take a look at the sample codes below, make necessary adjustments, and consider using media queries for different screen sizes.

Don't forget to include this meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Next, define the styles in the header:

<style type="text/css">
    .table-header{
        min-width: 80px;
        text-align: left;

    }
    .tables {
        width: 100%;
        margin-bottom: 30px;
    }
</style>

After that, apply the CSS classes to tables and table headers:

<table class="tables">

    <tr>
  <th class="table-header">First Name</th>
  <th class="table-header">Last Name</th>
  <th class="table-header">Points</th>
  <th class="table-header">Points</th>
  <th class="table-header">Points</th>
  <th class="table-header">Points</th>
  <th class="table-header">Points</th>
  <th class="table-header">Points</th>
  <th class="table-header">Points</th>
  <th class="table-header">Points</th>
  <th class="table-header">Points</th>
  <th class="table-header">Points</th>
</tr>

Lastly, note that the provided code snippet is only for a specific screen size. To ensure compatibility with various screens, utilize CSS media queries.

Creating a table that adjusts its columns to match the same width percentages for a responsive design

Answer №1

Answer №2

Similar questions

Unable to modify input box border

Efficiently incorporating styles and CSS, as well as Bootstrap CDN, into window.print() while utilizing Vue.js

Reorganize elements using CSS styling

Using javascript and d3.js to display a set number of items on each line through printing

Retrieve the value of the option that has been selected and then send it over to the function

Advanced CSS Techniques for Customizing UI Elements

Incorporating the 'react-day-picker' DatePickerInput in a Bootstrap Modal Interface

what is the best way to send file input value to a JQuery function?

RAZOR - Strip image elements from variable with HTML content

Arrange the parallel table columns within their own individual divs to be perfectly aligned

CSS slider experiencing issues

Guide to using Python and Selenium to automate clicking the "Load More" button on the webpage "https://github.com/topics"

How to make the slides in a Bootstrap 4 carousel slide in and out with animation

Is there a way for the remaining divs in a column to match the width of the widest div?

Extracting Data from Web Pages

"Wordpress Pluto theme: A stellar choice for your

Is there a way to make placeholder text automatically adjust its size to fit within the text input element and display its complete content?

The same bootstrap column code shows varying behavior

Deciding Between Javascript DOM and Canvas for Mobile Game Development

Transferring scope between pages without the need for an angular service definition