Tips for preventing table cells from vertically overflowing and displaying the table without any issues

I have tried numerous solutions from various sources, but none seem to work for my specific issue.

My HTML page consists only of a table that I want to print perfectly on a horizontal A4 sheet.

Here is the table without any text (it is a match referee):

https://i.sstatic.net/DqF0U.png
(source: i.ibb.co)

The problem arises when I add text as it alters the height of the table.

I attempted inserting a div inside the td with a set height, but this did not provide the desired outcome.

Furthermore, I am seeking guidance on how to print the page horizontally as the table exceeds the printable area.

Below is an example snippet of my table:

<table>
  <tr>
    <td>
      <div>BLABLABLA</div>
    </td>
  </tr>
  ...
  ...
  ...
</table>
csshtmlhtml-tableoverflow

Answer №1

If you're looking to control the size of your table and cells, consider using table-layout: fixed. This approach allows you to create a stretched table that doesn't adjust its height based on content.

.myTable {
  table-layout: fixed;
  width: 100%;
  height: 100%;
}

.myTable tr td div{
  overflow: hidden;
  border: 1px solid #333;
  height: 20px;
}

.myTable tr.higher td div {
  height: 40px;
}
<table class="myTable">
  <tr>
    <td><div>A lot of text to display.A lot of text to display.A lot of text to display.A lot of text to display.A lot of text to display.A lot of text to display.</div></td>
  <td><div>A lot of text to display. A lot of text to display. A lot of text to display.</div></td>
  </tr>
  <tr class="higher">
    <td><div>A lot of text to display. A lot of text to display. A lot of text to display.</div></td>
    <td><div>A lot of text to display. A lot of text to display.</div></td>
  </tr>
</table>

To make this work effectively in print media, insert it into @media print and fine-tune adjustments specific to your table layout.

For further information, check out these resources:

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

Creating a slider that is reminiscent of the Amazon product slider: A step-by-step guide

I am in the process of building a website, but I lack skills in js and jQuery. I have been searching for days trying to find a library that supports the feature I need - zoom and thumbnails similar to Amazon or eBay product listing slider. However, most of ...

javascriptjqueryhtmlcss

Supervising the organization of HTML sections for an offline web application

Currently, I am developing an offline HTML5 application that involves a significant amount of DOM manipulation through the creation of HTML strings within JavaScript functions. For example: var html=''; html+='<div class="main">&apos ...

javascriptjqueryhtml

Leveraging the ng-hide property of one controller to adjust the ng-style attribute of another controller through a centralized global controller

Seeking assistance with accessing the boolean value of ng-hide from one controller in order to alter CSS properties of another controller utilizing a global controller. Here is the jsfiddle link: https://jsfiddle.net/dqmtLxnt/ HTML <div ng-controller= ...

javascripthtmlcssangularjs

steps for marking comments as read or unread by multiple users

I'm working on a development blog for my project and I'd like to add a feature where users can mark comments as unread until they view them. For example, if an admin posts a comment, all users in that project should see it as unread. Can anyone ...

phpcssphpmyadmin

The issue of a centered image not displaying properly and the inability to adjust the font

I'm trying to get the image to display bigger and in the center, but no matter what I try it's not working. HTML: <div class="content-grid"> <img src="test.jpg" /> </div> CSS: .content-grid img{ display: block; margin: ...

htmlcss

I'm having an issue where my footer is getting cut off when I resize the browser and start side scrolling. Can

I designed a webpage with a footer that contains another div holding centered content. The footer is supposed to span the entire width, while the inner content div is set to 960px with a margin auto to center it. <footer> <div class="footer-in ...

csshtmllayout

Is it necessary for two inline divs to be floated?

I am facing an issue with my layout. I have two child divs within a parent div, each set to 50% width and displayed inline. To style the parent div, I am using the :after pseudo-element to draw a horizontal rule () with 15px top and bottom margins. The pr ...

htmlcss

Choosing pseudo-elements with CSS styling rules

I have been utilizing the Brave browser to block online ads. However, certain websites have found a way to insert ads into their HTML on the server-side, bypassing my ad-blocking efforts in Brave. Currently, Brave only offers the ability to block elements ...

csscss-selectorspseudo-elementadblock

Customize the overlay color using the theme's background color

I want to create an overlay on my webpage that covers all the content. However, I'm facing a challenge because my website allows users to customize the theme colors, and the overlay div does not adopt these color changes automatically. To rectify this ...

htmlcss

IE causing Ul LI Menu to not display as Block

I'm encountering an issue with my menu. It displays correctly in Firefox and Chrome, but in IE8 it appears as a vertical list instead of a horizontal menu. I have included a doctype and I am linking to the HTML5 JavaScript via Google, so I'm not ...

htmlcssinternet-explorerhtml-lists

The issue of body height not functioning properly when using a skeleton

Greetings! This is my debut question on Stack Overflow, and I am hopeful that someone can provide me with some guidance. I have encountered a hiccup while working on my webpage using the Skeleton framework. The issue at hand is setting the "height" to 100 ...

htmlcssheightskeleton-css-boilerplate

Tips for positioning three child divs horizontally within a parent div with flexible dimensions and arranging each one separately

Is there a way to stack three divs horizontally within a fluid-width container div, with each child div scaling proportionally when the browser is resized for responsive design? The left-most div should be on the left, the middle div centered, and the righ ...

htmlcssresponsive-designfluid-layout

Updating choices in dropdown list depending on the selected options in another dropdown list

Is there a way to dynamically change the options in a second dropdown based on the selection made in the first dropdown using jQuery? <select id="Manage"> <option value="a">A</option> <option value="b">B</option> < ...

htmljqueryhtml-select

What can I do to prevent my paragraph from extending down the entire page when adjusting the resolution?

I am facing an issue with my responsive website where the paragraph text appears as a long word tower when the screen size is reduced. How can I resolve this problem and reduce the space between the words? You can see the issue in the image here: https://i ...

htmlcss

Creating a tailored React component for a dynamic table with varying column and row sizes

I'm attempting to convert this into a React component for integration on my website: https://i.sstatic.net/MUwE3.png Figuring out the process of creating this, and if there are any libraries required is currently unknown to me. ...

htmlcssreactjs

Sort slider items using Show/Hide feature in bxSlider

I am using a bxslider on my website with specific settings: $('#carousel').bxSlider({ slideWidth: 146, minSlides: 2, maxSlides: 6, speed:500, adaptiveHeight: true, moveSlides:3, infiniteLoop : false, hideContr ...

javascriptjqueryhtmlcssbxslider

Scrolling text blocks on mobile devices

When viewing the website on a desktop, everything works perfectly. However, when accessing it on a mobile device and trying to scroll down, only the text moves while the page remains stationary. The website utilizes skrollr core for animations. I have alre ...

javascripthtmlcssanimationscroll

Using CSS to create a table with two columns

Greetings! I recently inherited a JavaScript application that includes a search window with the following code snippet. My goal is to have the text "Statistics Search" positioned above the Statistics label and checkbox. Next, I would like the remaining ro ...

htmlcss

I aim to utilize vanilla JavaScript in order to remove the parent element of the button being clicked when the user interacts with it

My latest project involves a meme generator that allows users to input text and images, which are then combined to create a unique 'meme'. Each meme is assigned a unique ID and features buttons for deleting the meme upon hovering. To achieve this ...

javascripthtmlcssthisremovechild

Can you set the line thickness for "text-decoration: line-through;" using CSS?

When it comes to the line-through property in CSS, the default weight of 1px is ideal for body copy set at 1em. However, for larger items like a price set at 3em on an offer site, 1px can feel too light. Is there a way to increase the line weight for line ...

css