Solution 2: You should be able to achieve what you want by using absolute positioning, with fixed top and bottom so that the left column elements are «snapped» to the height of the row. Tables have a bad rap due to frequent mis-use, but are indeed the leanest option when needing to display a grid of data in a variable width viewport.
CSS alignment of columns with multiple rows
managed to do what you wanted with just a little jq . hope you don’t mind
check here jsfiddle
css code added : .mymedia < height:100%;>
jq code added :
var result = $(".col-xs-7").height() - $(".row.striped").height()*2 $(".row.rightpadding").height(result)
result = height of the right col — the heights of both striped rows ( which are equal i presume )
then add that height to the middle row ( .row.rightpadding )
You should be able to achieve what you want by using absolute positioning, with fixed top and bottom so that the left column elements are «snapped» to the height of the row.
Wrap everything in a , and set the childs to have min-height: 100%
CSS Grid Layout, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java, Table Borders Table Size Table Alignment Table Style Table Responsive. Example. The column-gap property sets the gap between the columns:.grid-container
Force html table into single stacked column using only css and no javascript
Try adding this to you CSS:
I was confronted with a similar problem recently & seem to have found a good solution. Tables have a bad rap due to frequent mis-use, but are indeed the leanest option when needing to display a grid of data in a variable width viewport.
The answer to the original question is still no . In order to solve this problem without JavaScript, one must be able to edit the table markup.
Tables can look. okay. when stretched wide, but look just terrible when squished. «Responsive» tables are possible only by adding contextual markup to each cell (e.g. span.label & span.data elements). We can easily hide this new superfluous output by default & only show it when in a responsive view state.
When in a responsive view state, hide the thead element & show the .label elements.
I’ve created a repo which covers the solution in greater detail. Click here to see it work.
Simply; No. You cannot turn a row turn a 2-column table into a 1-column table without some JavaScript. Either tell the coders of the table to create the table that way, or simply use JavaScript to re-structure the table.
Html — CSS alignment of columns with multiple rows, result = height of the right col — the heights of both striped rows ( which are equal i presume ) let me know if it helps. You should be able to achieve what you want by using absolute positioning, with fixed top and bottom so that the left column elements are «snapped» to the height of the row. Try the snippet below.
How to style and align forms without tables?
This might not get a lot of support but here’s my two cents:
In some situations tables are easier for layout; such as three columns or forms (albeit there are some great suggestions here for doing a pure css form layout so don’t ignore those either.)
Processes and methodologies can make good servants but are poor masters. - Mark Dowd, John McDonald & Justin Schuh in "The Art of Software Security Assessment"
I believe that this quote very strongly applies to this situation. If your table layout is working for you, not causing accessibility issues and isn’t broken — then don’t fix it.
Phrases like: «you should», «must», «always» — make me scared, because one-size-doesn’t-fit-all! Take zealots with a grain of salt.
If you don’t use tables you need to know the width of your labels upfront. This can often be a problem for multi-language sites (i18n).
With tables, they stretch to fit labels of differing sizes. CSS alone can’t do that yet in a well-supported way.
Html — How to horizontally align columns in a table, In a good project of pagination, we should give the users the option to choose the size of the page, and if some table has 3,000 rows, he/she might want to see them all at once, so it must be possible.
To left-align the content, force the alignment of elements to be left-aligned, with the text-align: left property:
Firstname
Lastname
Savings
Peter
Griffin
$100
Lois
Griffin
$150
Joe
Swanson
$300
Example
Vertical Alignment
Firstname
Lastname
Savings
Peter
Griffin
$100
Lois
Griffin
$150
Joe
Swanson
$300
Example
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
HTML/CSS: Align entire Table Column right or centered
I have a quite large HTML table at which I want to align the text of a complete column either right aligned or centered.
Up to now, I only know the alignment possibility to set up inline CSS for each single TD element of the table, for example like that:
.
left-aligned content
centered content
right-aligned content
.
The problem is obvious: I have to repeat the text-align CSS for each table row (TR) — and as I have said, in my case that are very much rows.
So, isn’t there any other more convenient possibility for doing that? For example by defining some CSS or HTML only once at a central position or only once per column? Or at least a simpler solution than that?
Anja Proggy
You can for example go with the pseudo CSS selector nth-child.
Here is an example for a possible CSS rule:
table.colright td:nth-child(2)
Then you only have to assign the defined CSS class to your table:
With td:nth-child(2) you are selecting each second TD element. In each row starting with TR, the counting is reset so that it is sufficient to assign the class once to your entire table for always aligning the full second column. Last update on 2021-07-26 | Created on 2017-02-25
Progger99
For also supporting older browsers that cannot handle nth-child, you can use the following CSS:
Using this CSS selector, you select each column respectively each TD-element before which two other TD-elements are.
So, with this CSS, you would right align each third column of each table having assigned the class «colright». Last update on 2021-07-26 | Created on 2017-02-25
Compi
If you only want to make it shorter than you can also define the CSS class ralign and then write for each cell you want to align right. 2017-02-26 at 18:20
Guest
Hi, just solved it. use td:nth-child(1)
«td:nth-child(1)» selects the first data entry of each row.
that’s it and all your first column data will be set to your choice. 2022-11-28 at 19:05
Related Topics
Lord’s Prayer in 20 other Languages
CSS: Include CSS Stylesheets in HTML
MySQL: Add new Column to a Table
MySQL: Delete Data from Table — Difference between TRUNCATE, DELETE and DROP
CSS: «align:center» and «align:right» not working
Website Performance: Deliver JavaScript and CSS files compressed to reduce loading times
Delphi: CanvasTextOut: Align Left, Right and Center
Important Note
Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.
Participate
Ask your own question or write your own article on askingbox.com. That’s how it’s done.
asas
xxx xxx xxx 
asas
