Prevent your HTML tables from overflowing

I am attempting to create an HTML table with three columns, where I want the first and third columns to have a width of "auto" based on their content. The middle column should then take up the remaining space.

While this setup works well when the content in the middle column is narrower than the available width, it results in overflow if the content exceeds the column width.

Is there a way to achieve this layout even with long text in the middle column? What I'm aiming for is to truncate the text if it exceeds the column width.

<div style="background-color:orange; width:200px; padding: 5px">
  <table style="background-color: pink">
    <tr>
      <td style="background-color:red">
        123456
      </td>
      <td style="background-color:yellow; width:100%">
        1234567890123
      </td>
      <td style="background-color:green">
        123456
      </td>
    </tr>
  </table>
</div>
htmlcsshtml-table

Answer №1

It doesn't seem like using a table is the best approach for this task. Perhaps you can try using flex instead.

.fake_table {
  width: 150px;
  padding: 5px;
  display: flex;
  background-color:orange;
}

.row {
    display: flex;
    box-sizing: border-box;
    background-color: pink;
    width: 100%;
}

.col1, .col3 { flex: 1; }
.col2 { overflow: hidden; }
  
.col1 { background-color:red}
.col2 { background-color:yellow; }
.col3 { background-color:green }
<div class="fake_table">
  <div class="row">
    <div class="col1">123456</div>
    <div class="col2">1234567890123</div>
    <div class="col3">123456</div>
  </div>
</div>

Answer №2

Eureka! I have discovered the solution which involves using a combination of float and overflow, rather than a table:

<div style="background-color:orange; width:200px !important; padding: 5px">
    <div style="background-color: pink">
        <div style="background-color:red; float:left">
            123456
        </div>
        <div style="background-color:green; float:right">
            123456
        </div>
        <div style="background-color:yellow; overflow:hidden">
            1234567890123456
        </div>
    </div>
</div>

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

Using column-count within a media query is not supported

I am encountering an issue with my CSS code that includes the column-count property within a media query, and for some unknown reason, it doesn't seem to be working! .masonry { -webkit-column-count: 3; -moz-column-count: 3; column-count: ...

htmlcss

Accessing a form control's class in code behind using asp.net

<form id="form1" runat="server" role="form" class="form-horizontal"> Is there a way to modify the class of a control in the code behind? I want to update its value. Appreciate any help! ...

c#htmlasp.net

Is the order of SCSS (SASS) selectors important when dealing with nested classes?

Exploring SCSS Styles for List Items In this code snippet, I am investigating the order of selection for classes and pseudo-selectors in SCSS. Specifically, I am questioning whether &:before.active is equivalent to &.active:before. Here is an exa ...

csssasscss-selectors

How to add dimensions to a background image using CSS3

I would like the background image to have a size of 636px by 1140px instead of applying it to the div element directly. This is because I want to avoid scrollbars due to the height of the div. When I specify the width and height for the parent div, the ba ...

htmlcss

Utilize a fresh font style and replace the font family components in @mui/material with the new

Looking to bring in a fresh font family stored in a fonts directory and replace the existing mui base font family. import { responsiveFontSizes, createTheme } from '@mui/material'; import NEWFONTFAMILLY from '../fonts/something.otf' c ...

cssfontsmaterial-uifont-family

The Bootstrap 3 Navbar displays a #EEEEEE color when a link is hovered over

I have not specified a hover color in the stylesheet for links to be #EEEEEE. I want the navbar hover effect to blend in with the navbar background, creating a seamless transition when hovered over. For reference, here is my current stylesheet code: Paste ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Maintain a consistent header height with CSS even when using the calc() function

--dis: calc(var(--max-height) - var(--min-height)); /* @media large{--min-height:13rem}; @media small{--min-height:6.5rem}; --max-height:75vh; */ --percent: calc(var(--scroll-ani) / var(--dis)); /* in js: document.body.style = "--scroll-ani: ...

javascripthtmlcss

Can a hashmap variable be declared in HTML code?

Can a hashmap variable be set in HTML code? Here's an example: <form name="f1234"> <input type="text" name="map['foo1']" value="dog" /> <input type="text" name="map['foo2']" value="cat" /> </form> < ...

htmlhashmap

Having trouble converting my form data into an array for table display

My website has a form for entering dummy patient information, with a table to display the submitted data. However, I'm facing an issue where the data is not being stored in the array when the user clicks the "Add Patient" button. Upon checking the arr ...

javascriptjqueryhtmlarrayshtml-table

Is it possible to create an index.html page with all the necessary head tags to prevent duplicate code across multiple html pages?

Imagine I am using app.js or a Bootstrap CDN link for all of my HTML pages, but I don't want to include it in every single page individually. Is there a way to create an index.html file that includes this so that all other HTML pages load the head fro ...

javascripthtmlcss

Updating dropdown selection with JavaScript

I have a dropdown select menu with two options. I am using JavaScript to retrieve the selected value from the drop-down menu and display it in a text area. Here is my code: $(document).ready(function () { $('#pdSev').change(function () { ...

javascripthtml

Gorgeous Stew encounters a cautionary message before encountering a glitch in the middle of the

Currently, I am systematically going through every Wikipedia page related to a specific date (from January 1 to December 31). My primary focus is to extract the names of individuals who celebrate their birthday on that particular day. However, as I reach A ...

pythonhtmlbeautifulsoup

Sophisticated method in JavaScript to conceal and reveal div elements

My knowledge of front-end web development is strongest in HTML and CSS, but when it comes to JavaScript, I feel like there must be a more efficient way to achieve the functionality I want. On my website, I have a set of <li> items that, when clicked ...

javascriptjqueryhtmlcss

To enhance the appearance of an input field, implement the Bootstrap check feature

Using bootstrap in my app, I am dealing with a readonly input where I would like to add a checkmark inside of it. My attempt to simply add <input readonly type="text" id="kyc_status" class="form-control" value="Success ...

htmlbootstrap-5

What is the best way to use jQuery to adjust the size of a slider image based on a percentage of the browser window

I've been searching all over for a solution to this issue, but so far I haven't had any luck. Basically, I have an image that is 1800 pixels wide by 500 pixels high. I need this image to adapt to all screen resolutions. Instead of having a fixed ...

jqueryhtmlcss

Is your CSS failing to synchronize with HTML?

Greetings from MyWebsite.html! <DOCTYPE !html> <html> <head> <title>My Website</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- CSS --> <link rel="stylesheet" href="MyWebsite ...

htmlcss

What is the best way to make img-fluid function properly within Bootstrap Carousel?

I've been struggling to make my carousel images responsive by using the img-fluid tag, but I haven't had any success. I've attempted using !important and display: block, but nothing seems to work. I'm not sure what's causing the is ...

javascripthtmlcssbootstrap-4

Reasons for aligning inline elements with input boxes

I am facing a challenge with aligning a series of inline elements, each containing an input text box, within a single row. The number and labels of these input boxes can vary as they are dynamically loaded via AJAX. The width of the div housing these inli ...

javascripthtmlcss

Adjust the background color as you scroll

I am looking to create a functionality where the background-color of my header changes to match the background-color of the div it is currently scrolling past. For example, if the user scrolls to the #about section (which has a green background), I want th ...

jquerycss

Guide to aligning text to the right using the text-muted class

I'm attempting to align the text-muted class to the right side of the page. I've tried floating it right, pulling it right, but nothing seems to be working. <table class="table table-bordered"> <tbody> <tr> < ...

htmlcssbootstrap-4