Having A Table-cell Stretch - HTML & CSS - SitePoint Forums

Có thể bạn quan tâm

SitePoint Forums | Web Development & Design Community

HTML & CSS NokX May 20, 2016, 6:45pm 1 I’m making a “table” using CSS and DIVs and I’m needing one of the cells to stretch while the others are fixed. The code looks a little something like this right now, and I’m wanting “anotherCell” to stretch to fill up the remaining space.`.myTable { display: table; width: 100%; } .myRow { display: table-row; } .myRow div { display: table-cell; } .aCell { width: 100px; } .andAnotherCell { width: 100px; } I’m not sure what to set for the width (if anything) for “anotherCell”.1 Like SamA74 May 20, 2016, 6:48pm 2

I’m not sure what to set for the width (if anything) for “anotherCell”.

Just leave it unset and it should fill the remaining space left by the others.Tip: If you only want one row, you don’t need the row container.1 Like NokX May 20, 2016, 7:40pm 3 I may have thousands of rows. I was just using one as a simple example.I am leaving it unset and it’s not stretching. It’s making it the minimum width possible. The table isn’t stretching 100% it doesn’t seem either. PaulOB May 20, 2016, 7:42pm 4

.myRow div { display: table-cell; }

Don’t forget to add vertical-align:top to that rule or the items will align on the baseline and could look odd if images are involved.

Just leave it unset and it should fill the remaining space left by the others.

Yes that’s the beauty of cells and they don’t need widths as all the cells in a row must always equal the width of the parent row. This means that if you give a width to one cell then the other cells will still stretch to fill the available space. Even if you did size all three cells to be smaller than the table width the browser would call that ‘over-constrained’ and ignore the dimension on one of the cells to allow it to extend to the width of the table. NokX May 20, 2016, 8:09pm 5 Well, I have a width of 100% on both the table and table-row classes and it still doesn’t seem to be stretching the one cell. The two cells with explicit widths look like they should but the cell with no width is as small as possible. NokX May 20, 2016, 8:15pm 6 Ugh. Nevermind. I had the “table” div set with an ID instead of a class and I wasn’t referring to it properly in CSS. Problem fixed. Thanks!1 Like system Closed August 20, 2016, 3:16am 7 This topic was automatically closed 91 days after the last reply. New replies are no longer allowed. Related topics

Topic

Replies

Views

Activity

Max-width on table-cell? HTML & CSS

72898

October 8, 2014

Question regarding tables Get Started

672

June 17, 2010

Display: table questions HTML & CSS

1587

December 9, 2015

Cells auto resizing HTML & CSS

682

April 13, 2017

Expert Table Advice Needed HTML & CSS

854

October 8, 2014

Từ khóa » Html Table Stretch To Fit

Having A Table-cell Stretch - HTML & CSS - SitePoint Forums

Html - Stretching A Table's Width To Fit Web Browser - Stack Overflow

How To Create A Full Width Table - W3Schools

CSS Table-layout Property - W3Schools

HTML Table Fit To Screen: Height, Width

Table-layout - CSS: Cascading Style Sheets - MDN Web Docs

Fit-content - CSS: Cascading Style Sheets - MDN Web Docs

Stop Using To Set Table Width In HTML: Here's Why »

How To Set HTML Table Width And Height

CSS- Div- Be Careful When You Size Your Divs

Stretch Table To Full Width Of Page

How Do I Make The Background Image Stretch To Fit The Table Cell?

Flexible Table Width - DataTables Example

Table Layout - Tailwind CSS

How To Fit Table Column To Content Width In Tailwind - Simplernerd

Liên Hệ