<table>
<tr>
<td>Example</td>
<td>An extended phrase blah blah blah</td>
</tr>
</table>
<style>
td {
maximum-width: 67%;
}
</style>
This configuration is not functioning properly. Is there a way to specify the maximum width of a table cell using percentages?
Although an old query, it is now achievable by utilizing the css attribute table-layout: fixed on the table element. A solution for this query is provided in the following link CSS percentage width and text-overflow in a table cell
Implementing table-layout: fixed might be slightly challenging as this CSS property is not widely known.
table {
width: 100%;
table-layout: fixed;
}
Witness it in action by visiting the updated fiddle here: http://jsfiddle.net/Fm5bM/4/
As per the guidance provided in the CSS 2.1 specification regarding max-width, it is stated that "the impact of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is unspecified." Therefore, setting max-width directly on a td element is not feasible.
If the objective is to ensure that the second column occupies no more than 67% of the width, you can achieve this by specifying the width (which essentially acts as the minimum width for table cells) as 33%, like demonstrated in the example below:
td:first-child { width: 33% ;}
However, implementing this for both columns may not yield optimal results since it can lead to browsers allocating equal width to each column.
Although it's a year later, I thought I'd still share my solution. I was facing the same issue and found a workaround that worked for me. We applied a maximum width to the entire table and then adjusted the individual cell sizes to achieve the desired result.
To implement this, place the table within its own div and specify the width, min-width, and/or max-width of the div to control the entire table. You can then set the width and min-width for specific cells and set the max width for the div to achieve the overall maximum width.
#tablediv {
width:90%;
min-width:800px
max-width:1500px;
}
.tdleft {
width:20%;
min-width:200px;
}<div id="tablediv">
<table width="100%" border="1">
<tr>
<td class="tdleft">Test</td>
<td>A long string blah blah blah</td>
</tr>
</table>
</div>While this method may not provide a strict "max" width for individual cells, it does offer some level of control that could serve as an alternative. It worked for us in a situation where we needed the navigation sidebar to adjust to different screen sizes, especially on wider screens.
In order for the percentage to be relative to a set size, you can use the following CSS:
table {
width:200px;
}
td {
width:65%;
border:1px solid black;
}<table>
<tr>
<td>Testasdas 3123 1 dasd as da</td>
<td>A long string blah blah blah</td>
</tr>
</table>
I have discovered a solution for my project on how to make cells dynamically adjust their width, similar to the behavior of width:min-content.
You may find this trick useful in limiting the width of your cells.
table {
width: 100%;
border: 1px solid black;
}
table td {
width: 100%;
}
table td:first-child {
width: auto;
white-space: nowrap;
}
table td:nth-child(2) {
width: auto;
white-space: nowrap;
}
table, th, td {
border: 1px solid black;
padding-right: 5px;
}
td:last-child {
padding-right: unset;
} <table>
<tbody>
<tr>
<td >
<div class="">dymaic cell</div>
</td>
<td>one way</td>
<td>sweater, jumper, warm</td>
<td class="text-right">
<button></button>
</td>
</tr>
<tr>
<td >
<div class="">dymaic text</div>
</td>
<td>one way</td>
<td>sweater, jumper, warm</td>
<td class="text-right">
<button></button>
</td>
</tr>
<tr>
<td >
<div class="">dymaic text ,, very long</div>
</td>
<td>two ways</td>
<td>sweater, jumper, warm , jumper, warm</td>
<td class="text-right">
<button></button>
</td>
</tr>
</tbody>
</table>To solve this issue, I came up with a clever solution involving a div nested within the td element, styled with specific CSS attributes:
max-width: 300px; // Set maximum width
width: max-content;
By adjusting the width of another td to 100%, the remaining space in the table will be taken up.
To make this compatible with Chrome, ensure you adjust the width attribute in the td tag.
td width=600px
I am trying to center an element within a parent container. It seems simple with methods like transform, flexbox, and grid... The issue arises with overflow behavior. When the parent container shrinks below the dimensions of the child element, scrollbars a ...
In my endeavor to customize the line-through text decoration in red and change the text color to black or any other color for an email, I have experimented with various methods. These include wrapping the text in a span and setting its color to red, using ...
Creating a Firefox extension that inserts HTML elements into web pages poses the challenge of ensuring consistent styling across various websites. The CSS rules must be robust enough to override any potential modifications introduced by developers. This ta ...
I'm relatively inexperienced when it comes to PHP and JQuery, so please bear with me if my knowledge is limited. Currently, I'm facing an issue where loading a small HTML table that contains information queried from game servers (like shown in t ...
When I submit a form on the view page, I want the form data to be saved in a database table and displayed without refreshing the page. Below is my view code: <div class="col-md-12"> <div class="row"> <div> <table class="table table-s ...
My goal is to display the word "Hello" on the screen when the add button is clicked. However, I am encountering an issue where it is not showing up. Any insights or solutions would be greatly appreciated! import React, { Component } from 'react'; ...
I am currently uploading the description, number, and the image path using PHP database. However, I am encountering an error when attempting to retrieve the image from the controller. The error message reads: "Undefined property: stdClass::$imgPath .... o ...
I've gone through multiple forums and cannot seem to find the solution to my issue. If I overlooked it, I apologize for any duplication. I currently have a basic event handler set up for file submission in a form. Here is the code: onChange(e) { ...
I'm looking to create a scrollable div similar to the one shown on the page linked below for a large secondary navbar. This navbar will expand to the bottom of the page after the title and primary navbar. So when I scroll down the page, the title and ...
Hey there, I have a question regarding Internet Explorer and tablets. As I revamp this website and integrate Bootstrap into it, my focus is currently on the small-sized IE browser for tablets. My dilemma arises from not knowing if there are any tablets th ...
I am currently working on incorporating a Bootstrap 4 carousel into my application, but I seem to be encountering issues with the indicators. Ideally, clicking on any of them should navigate you to the corresponding photo, similar to this example: https:// ...
Currently preparing PSDs for the development of both an iOS and Android app. When it comes to coloring text, should I: 1) Utilize #000000 for black text, adjusting opacity to achieve various shades of gray for primary and secondary text? 2) Or opt for a ...
In the process of creating a search tool for internal use within my organization, I have established a deployment strategy that involves: Storing an HTML5 web page on the file server. Keeping a 200MB JSON or JavaScript file in another location. Currentl ...
I have a link on my website that opens a floating window containing more links when clicked. <a href='javascript:void(0);' onclick='window.open("http://mylink.html","ZenPad","width=150, height=900");' target='ZenPad'>&l ...
I am attempting to replicate this design: https://i.stack.imgur.com/H8gKF.png So far, this is what I have been able to achieve: https://i.stack.imgur.com/TJXXb.png My project utilizes Material UI and ReactJS. Below is a snippet of the code: bodyTitle: { ...
Hello all, I am currently facing an issue with my code where I need to call a text box (or a set of divs with input fields) multiple times by clicking a button (with the id 'add_row'). The current code works fine for the first time, but not for ...
My current goal is to achieve the following layout: <div style="position:absolute; background-color:Transparent; left:0px; right:0px; height:100px; z-index:2;"> <div style="background-color:Silver; width:1000px; height:100px; margin:0 auto;"& ...
Is there a way to alter styles of a sibling element on hover using only CSS? I attempted something similar but was unsuccessful. HTML: <ul> <li class="item active">name1</li> <li class="item">name2</li> <li clas ...
I am in the process of creating unique Pokemon cards that pull data from an API. My question is, how can I apply specific CSS styling to each card directly from the API, similar to how I have utilized AngularJS to render the information? So far, I have su ...
I am working on a project where I have a table with 5 data entries retrieved from a select query. My goal is to extract the ng-repeat value and ID, then transfer it to another element. As a beginner in Angularjs and HTML, I would greatly appreciate any ass ...