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

Learn the process of covering the entire screen with a video

Having trouble with GSAP CDN not functioning properly in your JavaScript or HTML document?

Guide on making a persistent sidebar using CSS and JavaScript

What is the best way to hide the black icons (x) and bars on larger screens and which specific CSS code should I use to achieve this?

Using CSS and Bootstrap together in the Yii2 framework

Guide on transferring the td id value to a different page

Using Jquery to enhance navigation tabs with pointers

Creating a personalized layout for your WordPress posts with custom card designs

CSS opacity is currently not working as intended

When you hit a certain point on the website, the scrolling momentarily pauses

Having issues with customizing the design of MaterialUI Accordion header

CSS: Centralizing a Div Element with Fluid Width

Toggling the visibility of a div using JavaScript

Tips for creating a responsive CSS "drawing"

Is it possible to stack divs horizontally in a liquid layout while allowing one of the widths to be dynamic?

Arrangement containing 4 separate div elements - 2 divs are fixed in size, 1 div adjusts dynamically (without scroll), and the remaining div fills the

designing a responsive form in the mobile environment

When the child element's "aria-expanded" attribute is set to true, a CSS class should be dynamically

Using Percentage-Based Margin in React-Native

Is there a way to extract a list of words from a designated element using selenium?