Having A Table-cell Stretch - HTML & CSS - SitePoint Forums Trang chủ » Html Stretch Table Row » Having A Table-cell Stretch - HTML & CSS - SitePoint Forums Có thể bạn quan tâm Html Stretch Table To Full Height Html Stretch Table To Full Width Html Stretch Width Html Style Kalın Yazı Html Svg File Color Having a table-cell stretch 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. ` Test Testing Testing ` .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 NokX: 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 NokX: .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. SamA74: 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 Absolute cell width in table Get Started 8 2014 October 8, 2014 Problem with cell width in a table HTML & CSS 9 917 December 26, 2019 Max-width on table-cell? HTML & CSS 4 74043 October 8, 2014 Display: table questions HTML & CSS 14 1638 December 9, 2015 Left-Align, Full-Width `display: table-cell` With One Row HTML & CSS 11 7128 April 3, 2023 Từ khóa » Html Stretch Table Row How To Make A Table Cell Stretch For The Rest Of The Width? [duplicate] Table Row And Column Spanning - Home And Learn Table-layout - CSS-Tricks How To Create A Full Width Table - W3Schools CSS Table-layout Property - W3Schools Table-layout - CSS: Cascading Style Sheets - MDN Web Docs Video: Resize Table Rows And Columns - Microsoft Support Table Rowspan And Colspan In HTML Explained (With Examples) » Advanced Table Settings: Column Width, Alignment And Merging Cells Tables - W3C Tables With Irregular Headers | Web Accessibility Initiative (WAI) | W3C Format Tables In Adobe InDesign Resize A Table, Column, Or Row - Microsoft Support Table Layout - Tailwind CSS
