Different ways to restrict Table Header to 2 lines using CSS

When it comes to limiting text to a specific width, using white-space:nowrap is usually the go-to solution. However, I am facing a unique challenge where I need to make sure my header text fits within a specific width.

I initially tried adding individual styles to each <th> element to force them onto two lines, but that approach doesn't seem sustainable in the long run.

For example:

<table class="table table-hover table-sm text-center">
        <thead>
            <tr>
                <th>Lorem ipsum</th>
                <th>Lorem ipsum</th>
                <th>Lorem ipsum</th>
                <th>Lorem ipsum</th>
                <th>Lorem ipsum</th>
                <th style="min-width: 90px">Lorem ipsum dolor sit amet</th>
            </tr>
        </thead>
</table>

Another attempt was to insert line breaks within the text itself, but manually going through multiple files for this purpose didn't seem ideal either.

<th>Lorem ipsum <br /> dolor sit amet</th>

I also experimented with applying an external stylesheet to enforce a minimum width for all elements, but this caused significant spacing issues between table headers.

I'm curious to know if there is a more efficient method to achieve this outcome.

htmlcss

Answer №1

It is recommended to apply the max-width property to all header elements in order to set a maximum width for the table. By multiplying the number of headers by the chosen width, you can determine the overall maximum width of the table.

For instance, if there are 6 headers in your table, setting a max-width of 50px for each header would result in a total maximum width of 300px.

thead th {
    max-width: 50px
}

Answer №2

To limit the number of lines displayed, you can utilize the css property called line-clamp.

Here is an example:

<table class="table table-hover table-sm text-center">
        <thead>
            <tr>
                <th><span class='table-header-limit'>Lorem ipsum</span></th>
                <th><span class='table-header-limit'>Lorem ipsum</span></th>
                <th><span class='table-header-limit'>Lorem ipsum</span></th>
                <th><span class='table-header-limit'>Lorem ipsum</span></th>
                <th><span class='table-header-limit'>Lorem ipsum</span></th>
                <th><span class='table-header-limit'>Lorem ipsum dolor sit amet amet amet Lorem ipsum dolor sit amet amet amet Lorem ipsum dolor sit amet amet amet</span></th>
            </tr>
        </thead>
</table>

To implement this in CSS, use the following code:

.table-header-limit {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

For a visual representation of this output, refer to the image here: https://i.stack.imgur.com/Aosqm.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Halt spread: descend in a bubble?

It seems that the issue at hand may not be related to propagation, but rather a design flaw. I have come across information suggesting that propagation problems tend to bubble up, however, let me explain my situation. I am working with a table edit grid. ...

javascripthtmlcssangularjsstoppropagation

Erase every picture contained within the element

<div id="uniqueidhere"> <span> <span><img src="image1link"></img></span> <span><img src="image2link"></img></span> <span><img src="image3link"></img></span> <span>&l ...

javascriptjqueryhtml

Using a local variable within quotes in Angular 4 (HTML) and utilizing ngFor

In my current project, I am utilizing Angular2-Collapsible. The objective is to display the details upon clicking a table row. Below is the code snippet provided. Specifically, if I add [detail]= "detail1", the collapsible-table-row-detail will appear when ...

htmlangularinterpolationngfor

Having all elements at the same height

I am looking to enhance my JavaScript code to only impact 4 items at a time. The goal is to target the first 4 instances of .prodbox, adjust their height accordingly, then move on to the next set of 4 and repeat the process. This sequential adjustment will ...

javascriptjqueryhtmlcss

CSS might not always work properly on all web browsers, but it functions perfectly on Eclipse

When developing JSF pages with stylesheets, everything seems to be working fine in the Eclipse preview function. However, when I test the pages on IE8, the styles do not seem to have any effect. I am utilizing composite views to define a general layout fo ...

cssjsffacelets

Guide to generating customized CSS styles on-the-fly in Vue (similar to Angular's dynamic styling capabilities)

When working with Angular, we have the capability to dynamically set CSS properties. For example: <style ng-if="color"> .theme-color { color: {{color}}; } .theme-background-color { background-color: {{color}}; } .theme-border-color { border-color: { ...

javascriptcssvue.jsvuex

Chrome has some issues with resizing the SVG Pattern element

Utilizing inline svgs, I have a svg circle filled with a pattern that should cover 100% of the container size. However, when the parent element is resized via JavaScript, the pattern no longer reflects the 100% width and height as expected. This issue seem ...

javascripthtmlcssgoogle-chromesvg

My HTML and CSS design is not displaying correctly on mobile devices

Currently, I am in the process of utilizing a free website template. However, I am facing an issue with adjusting the background image. Is there anyone who can provide some guidance on resolving this particular problem? I would be happy to share the code ...

htmlcssmobile

I would like to add a border at the bottom of each item in a ul list

My current focus is on making my website responsive with a breakpoint set at 576px I am aiming to achieve the design shown in this image without any space in the border-bottom and have both elements expand to full width: menu li hover However, I'm c ...

javascripthtmlcsshtml-lists

A comprehensive guide on associating a JavaScript function with an element attribute

I am looking for a way to assign a JavaScript function to an HTML attribute. For example: <li data-ng-repeat="job in jobList" class= dynamicClass(str) data-filter = "dynamicFilter(str)"> The reason I want to do this is because the class name and ...

javascriptjqueryhtmlcss

Is there a way to eliminate the number spinner in Angular specifically for certain input fields?

I am facing an issue where I need to remove the numeric spinner from only a few selected inputs. By adding the following code snippet to my styles.scss file, I was able to successfully remove the spinner: /* Chrome, Safari, Edge, Opera */ input[matinput]: ...

cssangularangular-material

What is the best way to set a default value for a date input field?

I am in the process of developing a form that enables users to modify the information on the form, with the initial values of the form appearing as defaults. Despite setting my variable as the value, it does not display. All other default values are visib ...

htmlformsinputdefault

Locate the final flexbox in the initial row and the initial flexbox in the concluding row

How can I identify the last element of the first row and the first element of the last row in the given code to make it round from all corners? It should be noted that the column number will vary as well as the last element of the first row and first eleme ...

jqueryhtmlcssflexbox

How to link an external CSS file to a Vue.js project

I created a new project using @vue/cli and now I want to add an external CSS file to my App.vue Here's what I attempted: <template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> | ...

javascriptcssvue.jswebpack

End the div element upon completion of the Vimeo video

I am in need of a website that includes an intro video displayed as a full-width div over the background content. To achieve this, I created a Div containing an iframe video from Vimeo along with a button to skip the intro (which closes the div upon clicki ...

javascriptjquerycssvimeovimeo-api

Increase the value only when there is existing code present

I currently have a MySQL table with two columns. The first column stores IP addresses, while the second column holds integers that need to be incremented. Whenever a new IP address visits the website, the integer associated with that IP should increase by ...

phpmysqlhtml

Using Styled Components to achieve full width for input tag in relation to its parent

I am working with an input field that has a specific width set. My goal is to increase the width of this input field to 100% by selecting it from its parent component. Is there a way to achieve this without passing an explicit width prop in the styled c ...

javascripthtmlcssreactjsstyled-components

Use CSS to target elements with IDs that have been generated randomly

Unfamiliar with the specific IDs, this markup presents a challenge: #product-20625055 { background-color: #FC0; } #product-66980342 { background-color: #0CF; } #product-54722210 { background-color: #F0C; } <div class="product" id="product-20625055"&g ...

htmlcsscss-selectors

Is it possible to effortlessly associate a personalized string with an identifier within an HTML element utilizing Angular2?

Check out this cool plunker import {Component} from 'angular2/core' @Component({ selector: 'my-app', template: ` <div *ngFor="#option of myHashMap"> <input type="radio" name="myRadio" id="{{generateId(option[& ...

javascripthtmltypescriptangular

Incorporate a button within a listview on Kendoui to trigger the opening of a modal window

I am seeking assistance on how to insert a button on each element of a Listview (PHP/Json) result. When clicked, this button should open a modal window where the customer can input reservation details such as Date, Adults, and Children. Below is the JavaSc ...

javascriptjqueryhtmlkendo-ui