Can we limit the text in a specific cell to one line on a desktop for a responsive table?

Question

Can we limit the text in a specific cell to one line on a desktop for a responsive table?

I am facing a challenge with making the second cell in my table have a width of 100% while ensuring that the text stays on one line.

While the mobile version is functioning correctly, I am struggling to find a solution for the desktop version as the last cells are not collapsing the text in the second cell.

If you'd like to view the source code, please visit this CodePen link.

I did try the following approach:

table {
  table-layout: fixed;
  width: 100%;
}

However, this ended up making all cell widths even. My goal is to have the second cell occupy full width while allowing the rest of the cells to adjust based on their content.

Thank you!

css responsive-design html-table

Answer 1

Answer №1

Utilize the th element to specify the width of the columns:

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
table {
  border-collapse: collapse;
  margin: 20px auto;
  table-layout: fixed;/* will also fix width to cells if specified */
  width: 100%;
}
table thead tr th {
  text-align: left;
  font-weight: bold;
  text-transform: uppercase;
  background: #f8f8f8;
}
table thead tr th,
table tbody tr td {
  padding: 10px;
}
table tbody tr td {
  border: 1px solid #e5e5e5;
}
table tbody tr,
table thead tr {
  border: 1px solid #e5e5e5;
}
/* set th width */
table thead tr th:first-child {
  border-right: 1px solid #e5e5e5;
  width: 2em;/* should be enough*/
}

/* LAST TWO CELLS */

table thead tr th:nth-child(2) ~th {
  width: 4em;/* should be enough*/
}
/* end th width */

table tbody tr td:first-child {
  text-align:right;
  padding:0 0.25em 0 0
}

/* SECOND CELL */

table tbody tr td:nth-child(2) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
table tbody tr td:nth-child(2) ~td {
  background: red;
  text-align:center;
}
/* RESPONSIVE */

@media screen and (max-width: 600px) {
  table {
    width: 100%;
  }
  table thead {
    display: none;
  }
  table tbody tr {
    display: block;
  }
  table tbody tr td {
    display: block;
    text-align: center;
    border: 0;
    border-bottom: 1px solid #e4e5e7;
  }
  table tbody tr td:first-child {
    background: #f8f8f8;
  }
  table tbody tr td:last-child {
    border-bottom: 0px;
  }
  table tbody tr td:before {
    content: attr(data-th);
    font-weight: bold;
  }
}

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Post Title</th>
      <th></th>
      <th></th>
    </tr>
    <tbody>
      <tr>
        <td data-th="POST ID: ">1</td>
        <td data-th="TITLE: ">Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
        <td><a href="#">Edit</a>
        </td>
        <td><a href="#">Delete</a>
        </td>
      </tr>
      <tr>
        <td data-th="POST ID: ">01</td>
        <td data-th="TITLE: ">Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
        <td><a href="#">Edit</a>
        </td>
        <td><a href="#">Delete</a>
        </td>
      </tr>
      <tr>
        <td data-th="POST ID: ">150</td>
        <td data-th="TITLE: ">Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
        <td><a href="#">Edit</a>
        </td>
        <td><a href="#">Delete</a>
        </td>
      </tr>
</table>

Answer 2

Utilize the th element to specify the width of the columns:

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
table {
  border-collapse: collapse;
  margin: 20px auto;
  table-layout: fixed;/* will also fix width to cells if specified */
  width: 100%;
}
table thead tr th {
  text-align: left;
  font-weight: bold;
  text-transform: uppercase;
  background: #f8f8f8;
}
table thead tr th,
table tbody tr td {
  padding: 10px;
}
table tbody tr td {
  border: 1px solid #e5e5e5;
}
table tbody tr,
table thead tr {
  border: 1px solid #e5e5e5;
}
/* set th width */
table thead tr th:first-child {
  border-right: 1px solid #e5e5e5;
  width: 2em;/* should be enough*/
}

/* LAST TWO CELLS */

table thead tr th:nth-child(2) ~th {
  width: 4em;/* should be enough*/
}
/* end th width */

table tbody tr td:first-child {
  text-align:right;
  padding:0 0.25em 0 0
}

/* SECOND CELL */

table tbody tr td:nth-child(2) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
table tbody tr td:nth-child(2) ~td {
  background: red;
  text-align:center;
}
/* RESPONSIVE */

@media screen and (max-width: 600px) {
  table {
    width: 100%;
  }
  table thead {
    display: none;
  }
  table tbody tr {
    display: block;
  }
  table tbody tr td {
    display: block;
    text-align: center;
    border: 0;
    border-bottom: 1px solid #e4e5e7;
  }
  table tbody tr td:first-child {
    background: #f8f8f8;
  }
  table tbody tr td:last-child {
    border-bottom: 0px;
  }
  table tbody tr td:before {
    content: attr(data-th);
    font-weight: bold;
  }
}

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Post Title</th>
      <th></th>
      <th></th>
    </tr>
    <tbody>
      <tr>
        <td data-th="POST ID: ">1</td>
        <td data-th="TITLE: ">Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
        <td><a href="#">Edit</a>
        </td>
        <td><a href="#">Delete</a>
        </td>
      </tr>
      <tr>
        <td data-th="POST ID: ">01</td>
        <td data-th="TITLE: ">Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
        <td><a href="#">Edit</a>
        </td>
        <td><a href="#">Delete</a>
        </td>
      </tr>
      <tr>
        <td data-th="POST ID: ">150</td>
        <td data-th="TITLE: ">Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
        <td><a href="#">Edit</a>
        </td>
        <td><a href="#">Delete</a>
        </td>
      </tr>
</table>

Answer 3

Answer №2

When faced with challenges like this, I prefer to create pseudo-tables using div elements instead of traditional tables. This approach offers greater flexibility in manipulating block positioning compared to utilising table cells.

Answer 4

When faced with challenges like this, I prefer to create pseudo-tables using div elements instead of traditional tables. This approach offers greater flexibility in manipulating block positioning compared to utilising table cells.

Can we limit the text in a specific cell to one line on a desktop for a responsive table?

Answer №1

Answer №2

Similar questions

Whenever the download bar emerges at the bottom, the slideshow content on the page suddenly shifts upwards

CSS transitions/transforms are failing to impact the necessary elements

What is the best way to align text at the center of a circular animation?

Manipulating the DOM in AngularJS Directives without relying on jQuery's help

A fixed header for tables that shifts along with horizontal scrolling

Implementing the rotation of an element using 'Transform: rotate' upon loading a webpage with the help of Jquery, Javascript, and

Instructions on creating a "ripple" effect on a webpage using CSS

Trick for adjusting padding on top and bottom for responsive blocks of varying widths

Create animated changes in height for a mdDialog as elements are shown or hidden

Material-UI Grid in Full Width Mode is malfunctioning

What could be causing the lack of animation in W3schools icons?

Ways to center vertically aligned buttons within cards in a React application with Material-UI

Concealing a Div on Click Outside of Child Div in ReactJS

Unusual HTML Structure (content misplaced or out of order?)

The parent container is not properly wrapping its content in Internet Explorer only

"Exploring the world of CSS3: Arrow shapes and animated effects

Struggling with the transition of a CSS navigation menu from hover to focus

How can custom selectors be created in LESS?

jQuery selector unable to locate the specified class in the table row

Arranging divs with CSS positioning