Making two of 4 columns equal widthMake a div fill the height of the remaining screen spaceHow to make div not larger than its contents?CSS3's border-radius property and border-collapse:collapse don't mix. How can I use border-radius to create a collapsed table with rounded corners?CSS Layout with Pixel And PercentsInput with display:block is not a block, why not?How to make a div 100% height of the browser windowMake the cursor a hand when a user hovers over a list itemHow do I make a placeholder for a 'select' box?HTML Table auto size chromeNested table alignment in with percentage width
Keep milk (or milk alternative) for a day without a fridge
Are neural networks prone to catastrophic forgetting?
Are there any intersection of Theory A and Theory B?
Were there any new Pokémon introduced in the movie Pokémon: Detective Pikachu?
How to check the quality of an audio sample?
During copyediting, journal disagrees about spelling of paper's main topic
How to achieve this rough borders and stippled illustration look?
Matchmaker, Matchmaker, make me a match
Can I intentionally omit previous work experience or pretend it doesn't exist when applying for jobs?
Did any of the founding fathers anticipate Lysander Spooner's criticism of the constitution?
Why are they 'nude photos'?
How might the United Kingdom become a republic?
As a DM, how to avoid unconscious metagaming when dealing with a high AC character?
How to query contacts with no cases, opportunities etc
'rm' (delete) thousands of files selectively
PIC12F675 GP4 doesn't work
How did the hit man miss?
Stuck Apple Mail - how to reset?
Extract an attribute value from XML
How do you tell if your Nintendo Switch is the primary console?
Are there any double stars that I can actually see orbit each other?
Would letting a multiclass character rebuild their character to be single-classed be game-breaking?
How can an advanced civilization forget how to manufacture its technology?
How the name "craqueuhhe" is read
Making two of 4 columns equal width
Make a div fill the height of the remaining screen spaceHow to make div not larger than its contents?CSS3's border-radius property and border-collapse:collapse don't mix. How can I use border-radius to create a collapsed table with rounded corners?CSS Layout with Pixel And PercentsInput with display:block is not a block, why not?How to make a div 100% height of the browser windowMake the cursor a hand when a user hovers over a list itemHow do I make a placeholder for a 'select' box?HTML Table auto size chromeNested table alignment in with percentage width
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
I have a table (width: 100%) with 4 columns. Column 1 and 3 are set to a fixed width of 190px. I want the remaining two columns to be of equal width no matter how wide the table gets. I've tried using <colgroup style='width: 50%'> for each grouping of two columns. I've tried using the calc function calc(50% - 190px) on each of the table columns via css. I've also used different combinations of max and min widths. All attempts fail once one column is forced to grow due to content. And the content is text, so it should wrap instead of override the width. Here's my html and css.
css:
table, td
padding: 0px;
margin: 0px;
border: none;
border-collapse: collapse;
table.main_table
width: 100%;
td.fixed_column
width: 190px;
background-color: red;
td.non_fixed_column
max-width: calc(50% - 190px);
background-color: yellow;
html:
<table class='main_table'>
<tr><td class='fixed_column'>1.1</td><td class='non_fixed_column'>2.1</td><td class='fixed_column'>3.1</td><td class='non_fixed_column'>4.1</td></tr>
<tr><td class='fixed_column'>1.2</td><td class='non_fixed_column'>2.2</td><td class='fixed_column'>3.2</td><td class='non_fixed_column'>4.2</td></tr>
</table>
table, td
padding: 0px;
margin: 0px;
border: none;
border-collapse: collapse;
table.main_table
width: 100%;
td.fixed_column
width: 190px;
background-color: red;
td.non_fixed_column
max-width: calc(50% - 190px);
background-color: yellow;
<table class='main_table'>
<tr><td class='fixed_column'>1.1</td><td class='non_fixed_column'>2.1</td><td class='fixed_column'>3.1</td><td class='non_fixed_column'>4.1</td></tr>
<tr><td class='fixed_column'>1.2</td><td class='non_fixed_column'>2.2</td><td class='fixed_column'>3.2</td><td class='non_fixed_column'>4.2</td></tr>
</table>This gives me a perfect result... until one of the cells has content that causes one column to grow. I don't care how tall a cell/row gets.
table, td
padding: 0px;
margin: 0px;
border: none;
border-collapse: collapse;
table.main_table
width: 100%;
td.fixed_column
width: 190px;
background-color: red;
td.non_fixed_column
max-width: calc(50% - 190px);
background-color: yellow;
<table class='main_table'>
<tr><td class='fixed_column'>1.1</td><td class='non_fixed_column'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td><td class='fixed_column'>3.1</td><td class='non_fixed_column'>4.1</td></tr>
<tr><td class='fixed_column'>1.2</td><td class='non_fixed_column'>2.2</td><td class='fixed_column'>3.2</td><td class='non_fixed_column'>4.2</td></tr>
</table>I do not want to use javascript to resize the cells. I don't understand the mechanics at work here!
html css html-table
edited Mar 26 at 5:04
kukkuz
34k7 gold badges29 silver badges72 bronze badges
asked Mar 26 at 4:36
Lee BlakeLee Blake
1271 silver badge14 bronze badges
add a comment |
I have a table (width: 100%) with 4 columns. Column 1 and 3 are set to a fixed width of 190px. I want the remaining two columns to be of equal width no matter how wide the table gets. I've tried using <colgroup style='width: 50%'> for each grouping of two columns. I've tried using the calc function calc(50% - 190px) on each of the table columns via css. I've also used different combinations of max and min widths. All attempts fail once one column is forced to grow due to content. And the content is text, so it should wrap instead of override the width. Here's my html and css.
css:
table, td
padding: 0px;
margin: 0px;
border: none;
border-collapse: collapse;
table.main_table
width: 100%;
td.fixed_column
width: 190px;
background-color: red;
td.non_fixed_column
max-width: calc(50% - 190px);
background-color: yellow;
html:
<table class='main_table'>
<tr><td class='fixed_column'>1.1</td><td class='non_fixed_column'>2.1</td><td class='fixed_column'>3.1</td><td class='non_fixed_column'>4.1</td></tr>
<tr><td class='fixed_column'>1.2</td><td class='non_fixed_column'>2.2</td><td class='fixed_column'>3.2</td><td class='non_fixed_column'>4.2</td></tr>
</table>
table, td
padding: 0px;
margin: 0px;
border: none;
border-collapse: collapse;
table.main_table
width: 100%;
td.fixed_column
width: 190px;
background-color: red;
td.non_fixed_column
max-width: calc(50% - 190px);
background-color: yellow;
<table class='main_table'>
<tr><td class='fixed_column'>1.1</td><td class='non_fixed_column'>2.1</td><td class='fixed_column'>3.1</td><td class='non_fixed_column'>4.1</td></tr>
<tr><td class='fixed_column'>1.2</td><td class='non_fixed_column'>2.2</td><td class='fixed_column'>3.2</td><td class='non_fixed_column'>4.2</td></tr>
</table>This gives me a perfect result... until one of the cells has content that causes one column to grow. I don't care how tall a cell/row gets.
table, td
padding: 0px;
margin: 0px;
border: none;
border-collapse: collapse;
table.main_table
width: 100%;
td.fixed_column
width: 190px;
background-color: red;
td.non_fixed_column
max-width: calc(50% - 190px);
background-color: yellow;
<table class='main_table'>
<tr><td class='fixed_column'>1.1</td><td class='non_fixed_column'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td><td class='fixed_column'>3.1</td><td class='non_fixed_column'>4.1</td></tr>
<tr><td class='fixed_column'>1.2</td><td class='non_fixed_column'>2.2</td><td class='fixed_column'>3.2</td><td class='non_fixed_column'>4.2</td></tr>
</table>I do not want to use javascript to resize the cells. I don't understand the mechanics at work here!
html css html-table
edited Mar 26 at 5:04
kukkuz
34k7 gold badges29 silver badges72 bronze badges
asked Mar 26 at 4:36
Lee BlakeLee Blake
1271 silver badge14 bronze badges
Does your project have Bootstrap?
– Raj Rajeshwar Singh Rathore
Mar 26 at 4:44
no. straight html
– Lee Blake
Mar 26 at 4:45
Is using htmltableelements for layout a requirement? Flexbox can do that exact layout pretty easy.
– BugsArePeopleToo
Mar 26 at 4:53
It's not a layout, really, its information/data display. I have considered using other elements or using tables within tables, but I was certain there was a correct way to format the table structured as is.
– Lee Blake
Mar 26 at 6:04
add a comment |
I have a table (width: 100%) with 4 columns. Column 1 and 3 are set to a fixed width of 190px. I want the remaining two columns to be of equal width no matter how wide the table gets. I've tried using <colgroup style='width: 50%'> for each grouping of two columns. I've tried using the calc function calc(50% - 190px) on each of the table columns via css. I've also used different combinations of max and min widths. All attempts fail once one column is forced to grow due to content. And the content is text, so it should wrap instead of override the width. Here's my html and css.
css:
table, td
padding: 0px;
margin: 0px;
border: none;
border-collapse: collapse;
table.main_table
width: 100%;
td.fixed_column
width: 190px;
background-color: red;
td.non_fixed_column
max-width: calc(50% - 190px);
background-color: yellow;
html:
<table class='main_table'>
<tr><td class='fixed_column'>1.1</td><td class='non_fixed_column'>2.1</td><td class='fixed_column'>3.1</td><td class='non_fixed_column'>4.1</td></tr>
<tr><td class='fixed_column'>1.2</td><td class='non_fixed_column'>2.2</td><td class='fixed_column'>3.2</td><td class='non_fixed_column'>4.2</td></tr>
</table>
table, td
padding: 0px;
margin: 0px;
border: none;
border-collapse: collapse;
table.main_table
width: 100%;
td.fixed_column
width: 190px;
background-color: red;
td.non_fixed_column
max-width: calc(50% - 190px);
background-color: yellow;
<table class='main_table'>
<tr><td class='fixed_column'>1.1</td><td class='non_fixed_column'>2.1</td><td class='fixed_column'>3.1</td><td class='non_fixed_column'>4.1</td></tr>
<tr><td class='fixed_column'>1.2</td><td class='non_fixed_column'>2.2</td><td class='fixed_column'>3.2</td><td class='non_fixed_column'>4.2</td></tr>
</table>This gives me a perfect result... until one of the cells has content that causes one column to grow. I don't care how tall a cell/row gets.
table, td
padding: 0px;
margin: 0px;
border: none;
border-collapse: collapse;
table.main_table
width: 100%;
td.fixed_column
width: 190px;
background-color: red;
td.non_fixed_column
max-width: calc(50% - 190px);
background-color: yellow;
<table class='main_table'>
<tr><td class='fixed_column'>1.1</td><td class='non_fixed_column'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td><td class='fixed_column'>3.1</td><td class='non_fixed_column'>4.1</td></tr>
<tr><td class='fixed_column'>1.2</td><td class='non_fixed_column'>2.2</td><td class='fixed_column'>3.2</td><td class='non_fixed_column'>4.2</td></tr>
</table>I do not want to use javascript to resize the cells. I don't understand the mechanics at work here!
html css html-table
edited Mar 26 at 5:04
kukkuz
34k7 gold badges29 silver badges72 bronze badges
asked Mar 26 at 4:36
Lee BlakeLee Blake
1271 silver badge14 bronze badges
I have a table (width: 100%) with 4 columns. Column 1 and 3 are set to a fixed width of 190px. I want the remaining two columns to be of equal width no matter how wide the table gets. I've tried using <colgroup style='width: 50%'> for each grouping of two columns. I've tried using the calc function calc(50% - 190px) on each of the table columns via css. I've also used different combinations of max and min widths. All attempts fail once one column is forced to grow due to content. And the content is text, so it should wrap instead of override the width. Here's my html and css.
css:
table, td
padding: 0px;
margin: 0px;
border: none;
border-collapse: collapse;
table.main_table
width: 100%;
td.fixed_column
width: 190px;
background-color: red;
td.non_fixed_column
max-width: calc(50% - 190px);
background-color: yellow;
html:
<table class='main_table'>
<tr><td class='fixed_column'>1.1</td><td class='non_fixed_column'>2.1</td><td class='fixed_column'>3.1</td><td class='non_fixed_column'>4.1</td></tr>
<tr><td class='fixed_column'>1.2</td><td class='non_fixed_column'>2.2</td><td class='fixed_column'>3.2</td><td class='non_fixed_column'>4.2</td></tr>
</table>
table, td
padding: 0px;
margin: 0px;
border: none;
border-collapse: collapse;
table.main_table
width: 100%;
td.fixed_column
width: 190px;
background-color: red;
td.non_fixed_column
max-width: calc(50% - 190px);
background-color: yellow;
<table class='main_table'>
<tr><td class='fixed_column'>1.1</td><td class='non_fixed_column'>2.1</td><td class='fixed_column'>3.1</td><td class='non_fixed_column'>4.1</td></tr>
<tr><td class='fixed_column'>1.2</td><td class='non_fixed_column'>2.2</td><td class='fixed_column'>3.2</td><td class='non_fixed_column'>4.2</td></tr>
</table>This gives me a perfect result... until one of the cells has content that causes one column to grow. I don't care how tall a cell/row gets.
table, td
padding: 0px;
margin: 0px;
border: none;
border-collapse: collapse;
table.main_table
width: 100%;
td.fixed_column
width: 190px;
background-color: red;
td.non_fixed_column
max-width: calc(50% - 190px);
background-color: yellow;
<table class='main_table'>
<tr><td class='fixed_column'>1.1</td><td class='non_fixed_column'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td><td class='fixed_column'>3.1</td><td class='non_fixed_column'>4.1</td></tr>
<tr><td class='fixed_column'>1.2</td><td class='non_fixed_column'>2.2</td><td class='fixed_column'>3.2</td><td class='non_fixed_column'>4.2</td></tr>
</table>I do not want to use javascript to resize the cells. I don't understand the mechanics at work here!
table, td
padding: 0px;
margin: 0px;
border: none;
border-collapse: collapse;
table.main_table
width: 100%;
td.fixed_column
width: 190px;
background-color: red;
td.non_fixed_column
max-width: calc(50% - 190px);
background-color: yellow;
<table class='main_table'>
<tr><td class='fixed_column'>1.1</td><td class='non_fixed_column'>2.1</td><td class='fixed_column'>3.1</td><td class='non_fixed_column'>4.1</td></tr>
<tr><td class='fixed_column'>1.2</td><td class='non_fixed_column'>2.2</td><td class='fixed_column'>3.2</td><td class='non_fixed_column'>4.2</td></tr>
</table> table, td
padding: 0px;
margin: 0px;
border: none;
border-collapse: collapse;
table.main_table
width: 100%;
td.fixed_column
width: 190px;
background-color: red;
td.non_fixed_column
max-width: calc(50% - 190px);
background-color: yellow;
<table class='main_table'>
<tr><td class='fixed_column'>1.1</td><td class='non_fixed_column'>2.1</td><td class='fixed_column'>3.1</td><td class='non_fixed_column'>4.1</td></tr>
<tr><td class='fixed_column'>1.2</td><td class='non_fixed_column'>2.2</td><td class='fixed_column'>3.2</td><td class='non_fixed_column'>4.2</td></tr>
</table> table, td
padding: 0px;
margin: 0px;
border: none;
border-collapse: collapse;
table.main_table
width: 100%;
td.fixed_column
width: 190px;
background-color: red;
td.non_fixed_column
max-width: calc(50% - 190px);
background-color: yellow;
<table class='main_table'>
<tr><td class='fixed_column'>1.1</td><td class='non_fixed_column'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td><td class='fixed_column'>3.1</td><td class='non_fixed_column'>4.1</td></tr>
<tr><td class='fixed_column'>1.2</td><td class='non_fixed_column'>2.2</td><td class='fixed_column'>3.2</td><td class='non_fixed_column'>4.2</td></tr>
</table> table, td
padding: 0px;
margin: 0px;
border: none;
border-collapse: collapse;
table.main_table
width: 100%;
td.fixed_column
width: 190px;
background-color: red;
td.non_fixed_column
max-width: calc(50% - 190px);
background-color: yellow;
<table class='main_table'>
<tr><td class='fixed_column'>1.1</td><td class='non_fixed_column'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td><td class='fixed_column'>3.1</td><td class='non_fixed_column'>4.1</td></tr>
<tr><td class='fixed_column'>1.2</td><td class='non_fixed_column'>2.2</td><td class='fixed_column'>3.2</td><td class='non_fixed_column'>4.2</td></tr>
</table>html css html-table
html css html-table
edited Mar 26 at 5:04
kukkuz
34k7 gold badges29 silver badges72 bronze badges
asked Mar 26 at 4:36
Lee BlakeLee Blake
1271 silver badge14 bronze badges
edited Mar 26 at 5:04
kukkuz
34k7 gold badges29 silver badges72 bronze badges
asked Mar 26 at 4:36
Lee BlakeLee Blake
1271 silver badge14 bronze badges
edited Mar 26 at 5:04
kukkuz
34k7 gold badges29 silver badges72 bronze badges
edited Mar 26 at 5:04
kukkuz
34k7 gold badges29 silver badges72 bronze badges
edited Mar 26 at 5:04
kukkuz
34k7 gold badges29 silver badges72 bronze badges
34k7 gold badges29 silver badges72 bronze badges
asked Mar 26 at 4:36
Lee BlakeLee Blake
1271 silver badge14 bronze badges
asked Mar 26 at 4:36
Lee BlakeLee Blake
1271 silver badge14 bronze badges
asked Mar 26 at 4:36
Lee BlakeLee Blake
1271 silver badge14 bronze badges
1271 silver badge14 bronze badges
Does your project have Bootstrap?
– Raj Rajeshwar Singh Rathore
Mar 26 at 4:44
no. straight html
– Lee Blake
Mar 26 at 4:45
Is using htmltableelements for layout a requirement? Flexbox can do that exact layout pretty easy.
– BugsArePeopleToo
Mar 26 at 4:53
It's not a layout, really, its information/data display. I have considered using other elements or using tables within tables, but I was certain there was a correct way to format the table structured as is.
– Lee Blake
Mar 26 at 6:04
add a comment |
Does your project have Bootstrap?
– Raj Rajeshwar Singh Rathore
Mar 26 at 4:44
no. straight html
– Lee Blake
Mar 26 at 4:45
Is using htmltableelements for layout a requirement? Flexbox can do that exact layout pretty easy.
– BugsArePeopleToo
Mar 26 at 4:53
It's not a layout, really, its information/data display. I have considered using other elements or using tables within tables, but I was certain there was a correct way to format the table structured as is.
– Lee Blake
Mar 26 at 6:04
Does your project have Bootstrap?
– Raj Rajeshwar Singh Rathore
Mar 26 at 4:44
Does your project have Bootstrap?
– Raj Rajeshwar Singh Rathore
Mar 26 at 4:44
no. straight html
– Lee Blake
Mar 26 at 4:45
no. straight html
– Lee Blake
Mar 26 at 4:45
Is using html
table elements for layout a requirement? Flexbox can do that exact layout pretty easy.– BugsArePeopleToo
Mar 26 at 4:53
Is using html
table elements for layout a requirement? Flexbox can do that exact layout pretty easy.– BugsArePeopleToo
Mar 26 at 4:53
It's not a layout, really, its information/data display. I have considered using other elements or using tables within tables, but I was certain there was a correct way to format the table structured as is.
– Lee Blake
Mar 26 at 6:04
It's not a layout, really, its information/data display. I have considered using other elements or using tables within tables, but I was certain there was a correct way to format the table structured as is.
– Lee Blake
Mar 26 at 6:04
add a comment |
2 Answers
2
active
oldest
votes
You are looking for the table-layout: fixed;.
table-layout: fixed; - Table and column widths are set by the widths
of table and col elements or by the width of the first row of cells.
Cells in subsequent rows do not affect column widths.
see: https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
table, td
padding: 0px;
margin: 0px;
border: none;
border-collapse: collapse;
table.main_table
width: 100%;
table-layout: fixed;
td.fixed_column
width: 190px;
background-color: red;
td.non_fixed_column
background-color: yellow;
<table class='main_table'>
<tr><td class='fixed_column'>1.1</td>
<td class='non_fixed_column'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td><td class='fixed_column'>3.1</td><td class='non_fixed_column'>4.1</td></tr>
<tr><td class='fixed_column'>1.2</td><td class='non_fixed_column'>2.2</td><td class='fixed_column'>3.2</td><td class='non_fixed_column'>4.2</td></tr>
</table>answered Mar 26 at 4:55
caioviskcaiovisk
2,6171 gold badge7 silver badges13 bronze badges
This works great for my example html, and I had actually tried this in my actual code. In my actual code,however, the first row is actually a header with a colspan of 4, which negates the ability to use the fixed table-layout... Any suggestions to overcome this issue?
– Lee Blake
Mar 26 at 6:17
I've tried using colgroups to specify the widths before the header row, but that doesn't seem to work
– Lee Blake
Mar 26 at 6:25
I solved the problem by using the<caption>tag and styling it the same way I had the header row. This enable the functionality of the code in this answer. Thank you.
– Lee Blake
Mar 26 at 6:55
add a comment |
i have resolve your issue and the problem is you are using min-width, if you want to restrict any contend for the particular with then you need not to use min-width.
Kindly use width instead of min-width, my suggestion is mentioned below please try.
td.non_fixed_column
width: 200px;
background-color: yellow;
edited Mar 26 at 5:43
ahmednawazbutt
6327 silver badges19 bronze badges
answered Mar 26 at 4:56
deepak panwardeepak panwar
1381 gold badge2 silver badges13 bronze badges
I have already tried using width, max-width, and min-width in multiple combinations.
– Lee Blake
Mar 26 at 6:31
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55349926%2fmaking-two-of-4-columns-equal-width%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
You are looking for the table-layout: fixed;.
table-layout: fixed; - Table and column widths are set by the widths
of table and col elements or by the width of the first row of cells.
Cells in subsequent rows do not affect column widths.
see: https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
table, td
padding: 0px;
margin: 0px;
border: none;
border-collapse: collapse;
table.main_table
width: 100%;
table-layout: fixed;
td.fixed_column
width: 190px;
background-color: red;
td.non_fixed_column
background-color: yellow;
<table class='main_table'>
<tr><td class='fixed_column'>1.1</td>
<td class='non_fixed_column'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td><td class='fixed_column'>3.1</td><td class='non_fixed_column'>4.1</td></tr>
<tr><td class='fixed_column'>1.2</td><td class='non_fixed_column'>2.2</td><td class='fixed_column'>3.2</td><td class='non_fixed_column'>4.2</td></tr>
</table>answered Mar 26 at 4:55
caioviskcaiovisk
2,6171 gold badge7 silver badges13 bronze badges
This works great for my example html, and I had actually tried this in my actual code. In my actual code,however, the first row is actually a header with a colspan of 4, which negates the ability to use the fixed table-layout... Any suggestions to overcome this issue?
– Lee Blake
Mar 26 at 6:17
I've tried using colgroups to specify the widths before the header row, but that doesn't seem to work
– Lee Blake
Mar 26 at 6:25
I solved the problem by using the<caption>tag and styling it the same way I had the header row. This enable the functionality of the code in this answer. Thank you.
– Lee Blake
Mar 26 at 6:55
add a comment |
You are looking for the table-layout: fixed;.
table-layout: fixed; - Table and column widths are set by the widths
of table and col elements or by the width of the first row of cells.
Cells in subsequent rows do not affect column widths.
see: https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
table, td
padding: 0px;
margin: 0px;
border: none;
border-collapse: collapse;
table.main_table
width: 100%;
table-layout: fixed;
td.fixed_column
width: 190px;
background-color: red;
td.non_fixed_column
background-color: yellow;
<table class='main_table'>
<tr><td class='fixed_column'>1.1</td>
<td class='non_fixed_column'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td><td class='fixed_column'>3.1</td><td class='non_fixed_column'>4.1</td></tr>
<tr><td class='fixed_column'>1.2</td><td class='non_fixed_column'>2.2</td><td class='fixed_column'>3.2</td><td class='non_fixed_column'>4.2</td></tr>
</table>answered Mar 26 at 4:55
caioviskcaiovisk
2,6171 gold badge7 silver badges13 bronze badges
This works great for my example html, and I had actually tried this in my actual code. In my actual code,however, the first row is actually a header with a colspan of 4, which negates the ability to use the fixed table-layout... Any suggestions to overcome this issue?
– Lee Blake
Mar 26 at 6:17
I've tried using colgroups to specify the widths before the header row, but that doesn't seem to work
– Lee Blake
Mar 26 at 6:25
I solved the problem by using the<caption>tag and styling it the same way I had the header row. This enable the functionality of the code in this answer. Thank you.
– Lee Blake
Mar 26 at 6:55
add a comment |
You are looking for the table-layout: fixed;.
table-layout: fixed; - Table and column widths are set by the widths
of table and col elements or by the width of the first row of cells.
Cells in subsequent rows do not affect column widths.
see: https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
table, td
padding: 0px;
margin: 0px;
border: none;
border-collapse: collapse;
table.main_table
width: 100%;
table-layout: fixed;
td.fixed_column
width: 190px;
background-color: red;
td.non_fixed_column
background-color: yellow;
<table class='main_table'>
<tr><td class='fixed_column'>1.1</td>
<td class='non_fixed_column'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td><td class='fixed_column'>3.1</td><td class='non_fixed_column'>4.1</td></tr>
<tr><td class='fixed_column'>1.2</td><td class='non_fixed_column'>2.2</td><td class='fixed_column'>3.2</td><td class='non_fixed_column'>4.2</td></tr>
</table>answered Mar 26 at 4:55
caioviskcaiovisk
2,6171 gold badge7 silver badges13 bronze badges
You are looking for the table-layout: fixed;.
table-layout: fixed; - Table and column widths are set by the widths
of table and col elements or by the width of the first row of cells.
Cells in subsequent rows do not affect column widths.
see: https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
table, td
padding: 0px;
margin: 0px;
border: none;
border-collapse: collapse;
table.main_table
width: 100%;
table-layout: fixed;
td.fixed_column
width: 190px;
background-color: red;
td.non_fixed_column
background-color: yellow;
<table class='main_table'>
<tr><td class='fixed_column'>1.1</td>
<td class='non_fixed_column'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td><td class='fixed_column'>3.1</td><td class='non_fixed_column'>4.1</td></tr>
<tr><td class='fixed_column'>1.2</td><td class='non_fixed_column'>2.2</td><td class='fixed_column'>3.2</td><td class='non_fixed_column'>4.2</td></tr>
</table>table, td
padding: 0px;
margin: 0px;
border: none;
border-collapse: collapse;
table.main_table
width: 100%;
table-layout: fixed;
td.fixed_column
width: 190px;
background-color: red;
td.non_fixed_column
background-color: yellow;
<table class='main_table'>
<tr><td class='fixed_column'>1.1</td>
<td class='non_fixed_column'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td><td class='fixed_column'>3.1</td><td class='non_fixed_column'>4.1</td></tr>
<tr><td class='fixed_column'>1.2</td><td class='non_fixed_column'>2.2</td><td class='fixed_column'>3.2</td><td class='non_fixed_column'>4.2</td></tr>
</table>table, td
padding: 0px;
margin: 0px;
border: none;
border-collapse: collapse;
table.main_table
width: 100%;
table-layout: fixed;
td.fixed_column
width: 190px;
background-color: red;
td.non_fixed_column
background-color: yellow;
<table class='main_table'>
<tr><td class='fixed_column'>1.1</td>
<td class='non_fixed_column'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td><td class='fixed_column'>3.1</td><td class='non_fixed_column'>4.1</td></tr>
<tr><td class='fixed_column'>1.2</td><td class='non_fixed_column'>2.2</td><td class='fixed_column'>3.2</td><td class='non_fixed_column'>4.2</td></tr>
</table>answered Mar 26 at 4:55
caioviskcaiovisk
2,6171 gold badge7 silver badges13 bronze badges
answered Mar 26 at 4:55
caioviskcaiovisk
2,6171 gold badge7 silver badges13 bronze badges
answered Mar 26 at 4:55
caioviskcaiovisk
2,6171 gold badge7 silver badges13 bronze badges
answered Mar 26 at 4:55
caioviskcaiovisk
2,6171 gold badge7 silver badges13 bronze badges
2,6171 gold badge7 silver badges13 bronze badges
This works great for my example html, and I had actually tried this in my actual code. In my actual code,however, the first row is actually a header with a colspan of 4, which negates the ability to use the fixed table-layout... Any suggestions to overcome this issue?
– Lee Blake
Mar 26 at 6:17
I've tried using colgroups to specify the widths before the header row, but that doesn't seem to work
– Lee Blake
Mar 26 at 6:25
I solved the problem by using the<caption>tag and styling it the same way I had the header row. This enable the functionality of the code in this answer. Thank you.
– Lee Blake
Mar 26 at 6:55
add a comment |
This works great for my example html, and I had actually tried this in my actual code. In my actual code,however, the first row is actually a header with a colspan of 4, which negates the ability to use the fixed table-layout... Any suggestions to overcome this issue?
– Lee Blake
Mar 26 at 6:17
I've tried using colgroups to specify the widths before the header row, but that doesn't seem to work
– Lee Blake
Mar 26 at 6:25
I solved the problem by using the<caption>tag and styling it the same way I had the header row. This enable the functionality of the code in this answer. Thank you.
– Lee Blake
Mar 26 at 6:55
This works great for my example html, and I had actually tried this in my actual code. In my actual code,however, the first row is actually a header with a colspan of 4, which negates the ability to use the fixed table-layout... Any suggestions to overcome this issue?
– Lee Blake
Mar 26 at 6:17
This works great for my example html, and I had actually tried this in my actual code. In my actual code,however, the first row is actually a header with a colspan of 4, which negates the ability to use the fixed table-layout... Any suggestions to overcome this issue?
– Lee Blake
Mar 26 at 6:17
I've tried using colgroups to specify the widths before the header row, but that doesn't seem to work
– Lee Blake
Mar 26 at 6:25
I've tried using colgroups to specify the widths before the header row, but that doesn't seem to work
– Lee Blake
Mar 26 at 6:25
I solved the problem by using the
<caption> tag and styling it the same way I had the header row. This enable the functionality of the code in this answer. Thank you.– Lee Blake
Mar 26 at 6:55
I solved the problem by using the
<caption> tag and styling it the same way I had the header row. This enable the functionality of the code in this answer. Thank you.– Lee Blake
Mar 26 at 6:55
add a comment |
i have resolve your issue and the problem is you are using min-width, if you want to restrict any contend for the particular with then you need not to use min-width.
Kindly use width instead of min-width, my suggestion is mentioned below please try.
td.non_fixed_column
width: 200px;
background-color: yellow;
edited Mar 26 at 5:43
ahmednawazbutt
6327 silver badges19 bronze badges
answered Mar 26 at 4:56
deepak panwardeepak panwar
1381 gold badge2 silver badges13 bronze badges
I have already tried using width, max-width, and min-width in multiple combinations.
– Lee Blake
Mar 26 at 6:31
add a comment |
i have resolve your issue and the problem is you are using min-width, if you want to restrict any contend for the particular with then you need not to use min-width.
Kindly use width instead of min-width, my suggestion is mentioned below please try.
td.non_fixed_column
width: 200px;
background-color: yellow;
edited Mar 26 at 5:43
ahmednawazbutt
6327 silver badges19 bronze badges
answered Mar 26 at 4:56
deepak panwardeepak panwar
1381 gold badge2 silver badges13 bronze badges
I have already tried using width, max-width, and min-width in multiple combinations.
– Lee Blake
Mar 26 at 6:31
add a comment |
i have resolve your issue and the problem is you are using min-width, if you want to restrict any contend for the particular with then you need not to use min-width.
Kindly use width instead of min-width, my suggestion is mentioned below please try.
td.non_fixed_column
width: 200px;
background-color: yellow;
edited Mar 26 at 5:43
ahmednawazbutt
6327 silver badges19 bronze badges
answered Mar 26 at 4:56
deepak panwardeepak panwar
1381 gold badge2 silver badges13 bronze badges
i have resolve your issue and the problem is you are using min-width, if you want to restrict any contend for the particular with then you need not to use min-width.
Kindly use width instead of min-width, my suggestion is mentioned below please try.
td.non_fixed_column
width: 200px;
background-color: yellow;
edited Mar 26 at 5:43
ahmednawazbutt
6327 silver badges19 bronze badges
answered Mar 26 at 4:56
deepak panwardeepak panwar
1381 gold badge2 silver badges13 bronze badges
edited Mar 26 at 5:43
ahmednawazbutt
6327 silver badges19 bronze badges
edited Mar 26 at 5:43
ahmednawazbutt
6327 silver badges19 bronze badges
edited Mar 26 at 5:43
ahmednawazbutt
6327 silver badges19 bronze badges
6327 silver badges19 bronze badges
answered Mar 26 at 4:56
deepak panwardeepak panwar
1381 gold badge2 silver badges13 bronze badges
answered Mar 26 at 4:56
deepak panwardeepak panwar
1381 gold badge2 silver badges13 bronze badges
answered Mar 26 at 4:56
deepak panwardeepak panwar
1381 gold badge2 silver badges13 bronze badges
1381 gold badge2 silver badges13 bronze badges
I have already tried using width, max-width, and min-width in multiple combinations.
– Lee Blake
Mar 26 at 6:31
add a comment |
I have already tried using width, max-width, and min-width in multiple combinations.
– Lee Blake
Mar 26 at 6:31
I have already tried using width, max-width, and min-width in multiple combinations.
– Lee Blake
Mar 26 at 6:31
I have already tried using width, max-width, and min-width in multiple combinations.
– Lee Blake
Mar 26 at 6:31
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55349926%2fmaking-two-of-4-columns-equal-width%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Does your project have Bootstrap?
– Raj Rajeshwar Singh Rathore
Mar 26 at 4:44
no. straight html
– Lee Blake
Mar 26 at 4:45
Is using html
tableelements for layout a requirement? Flexbox can do that exact layout pretty easy.– BugsArePeopleToo
Mar 26 at 4:53
It's not a layout, really, its information/data display. I have considered using other elements or using tables within tables, but I was certain there was a correct way to format the table structured as is.
– Lee Blake
Mar 26 at 6:04