Is there a way i can show only the first and last table column (last being the far right column) using CSS media queries?
<table>
<tr>
<td>Service</td>
<td class="big">one</td>
<td class="big">two</td>
<td class="big">three</td>
<td class="big">four</td>
<td class="big">five</td>
<td class="big">six</td>
<td class="big">seven</td>
</tr>
</table>
so in the above, how can i display just the first and last columns (Service and seven)
i have tried using media queries to hide the td with a class of big but i need a way of keeping the last one (i cannot remove the class because its generated programatically)
Hide all td elements by default, then in a media query show the ones you want
eg.
<style>
td.big {
display: none;
}
#media (max-width: 600px) {
td.big:first-child, td.big:last-child {
display: table-cell;
}
}
</style>
You can maybe use the nth-child selector property to hide all the columns you don't need.
Related
I created a table width 4 images which are placed in a row and four columns (1x4).
<table class="insrtTable">
<tr>
<td><img src=Guitarra.png></td>
<td><img src=Bajo.png></td>
<td><img src=Teclado.png></td>
<td><img src=Ukelete.png></td>
</tr>
</table>
My problem is that I need to see the images in my cellphone in two rows and two columns(2x2).(like this)
<table class="insrtTable">
<tr>
<td><img src=Guitarra.png></td>
<td><img src=Bajo.png></td>
</tr>
<tr>
<td><img src=Teclado.png></td>
<td><img src=Ukelete.png></td>
</tr>
</table>
How can I do that? I see a lot of responsible tables that transform 1 column and 4 rows into 4 columns and 1 row but I can't find one that works for me.
Try using a grid system like Flexbox or Bootstrap grid system. You can make your own grid system as well, but you will be just reinventing the wheel.
Responsiveness is also tied with how you mark your CSS properties, a simple example:-
<div class="container">
Text content </div>
.container {
width:3px; <!-- vs width:3%; --> }
Using % values instead of pixel hardcoded values, can make a difference in your website responsiveness.
A useful source for developing your own grid system- https://zellwk.com/blog/responsive-grid-system/
To answer the actual question, yes you can make somewhat responsive tables, but that would involve unnecessary hacking since tables where never meant to be responsive back in the 70's when they were created. And you'd probably run out of options when trying to do more advanced stuff with them.
A modern approach to layouts in CSS is using something like flexbox. You could solve the problem like this:
<div class="container">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
.container {
display: flex;
flex-wrap: wrap;
}
.container > .col {
background: tomato;
padding: 16px;
border: 5px solid black;
width: 50%;
}
#media (min-width: 599px) {
.container > .col {
width: 25% !important;
}
}
See it in action here: https://codepen.io/nicooga/pen/MEwZgZ. The key is flex-wrap: wrap, which allows elements overflowing into the next row if they exceed the container's size.
All you need to know about flexbox is here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/.
It seems there's a brand new grid system in native css that seems to do all that was great about flexbox and more: https://css-tricks.com/snippets/css/complete-guide-grid/.
The word you're looking for is "responsive", not "responsible."
How can i do that? i see a lot of responsible tables that transform 1 column and 4 rows into 4 columns and 1 row but i cant find one that works for me.
Most use Bootstrap columns to achieve this.
You can try this simple solution.
First, add a td placeholder where you want to break row (td with class resp)
<table class="insrtTable">
<tr>
<td><img src="img1.png"></td>
<td><img src="img2.png"></td>
<td class="resp"></td>
<td class=""><img src="img3.png"></td>
<td class=""><img src="img4.png"></td>
</tr>
</table>
then you apply the following styles to the table:
#media only screen and (max-width: 767px), (min-device-width: 768px) and (max-device-width: 1024px) {
thead, tbody, th, td.resp, tr {
display: block;
}
}
When you reduce the size of browser window under 768px it'll break 2 images on the first row and 2 on the second row.
You can apply this methodology either to more than 4 columns, setting placeholder where you need.
Responsive design cannot be made with tables. Use other ways. I suggest flex-container or float and clear.
This website is for flex containers.
I have a standard table in which the cells appear left-to-right in the same row, but I'd like to force the third cell to appear on a new line. Is there a CSS tweak that can do this?
<table><tr>
<td class="col-1">One</td>
<td class="col-2">Two</td>
<td class="col-3">Three</td>
<td class="col-4">Four</td>
</tr></table>
This displays as: One Two Three Four
Can I force the third column to display on a new row thus:
One Two
Three Four
Not exactly sure why you wouldn't just make it a new row, but I suppose if you had to use CSS, you could do something like this:
table tr td {
display: block;
width: 50%;
box-sizing: border-box;
float: left;
}
JSFiddle
You can make a new row, by wrapping around your td with a tr as below
<table>
<tr>
<td class="col-1">One</td>
<td class="col-2">Two</td>
</tr>
<tr>
<td class="col-3">Three</td>
<td class="col-4">Four</td>
</tr>
</table>
Hope this helps!
I'm editing my forum for mobile devices. So, I'm using media queries to format the front page based on device width.
My issue is that all of the categories have this style, which puts the td elements all in a row.
<tr class="windowbg2">
<td class="icon windowbg">
</td>
<td class="info">
</td>
<td class="stats windowbg">
</td>
<td class="lastpost">
</td>
</tr>
I don't want to get into the PHP that creates the rows, and my attempts/searches so far haven't worked how I want.
I want have the icon td and the info td squished onto one row, and under it have the stats and lastpost tds. How would I separate this row into two using CSS alone?
HTML
<table>
<tr class="windowbg2">
<td class="icon_windowbg">
icon windowbg
</td>
<td class="info">
info
</td>
<td class="stats_windowbg">
stats windowbg
</td>
<td class="lastpost">
lastpost
</td>
</tr>
</table>
CSS
table ,td {
border: 1px solid #000;
}
table {
width: 100%;
}
td {
width: 49%;
float: left;
display: block;
}
The border on the table is just so you can see it. You can take that off.
DEMO
http://codepen.io/anon/pen/xbdjoW?editors=110
You'll want to use a grid framework like Twitter's bootstrap or Thoughtbots "Bourbon neat". These allow you to specify how large an area will be with a main container. Then how much an each element will take up in that container.
with bourbon neat you could use
tr {
display:block # you're probably better off using div's though
#include outer-container;
}
ele {
#include span-columns(6);
}
this would effectivily in a 12 column grid put the two side by side in a row if your elements were
<tr>
<td class="ele"></td>
<td class="ele"></td>
</tr>
you can use this logic to make the other ones span the full 12 columns in the next row.
of course this can all be done in regular css with max-widths and more. grids just have done alot of the work for you. bootstrap is even easier to use. i just prefer bourbons more hands-off approach.
the best way to show you what I want to achive is showing the picture:
I tried to position nested tables to each side of row. I looked for solution but didn't find anything interesting.
When I played with "position: absolute;" i did more damage than good results. Is it possible to do it like in the picture?
EDIT: It's not my project and I don't have any influence on design. It's based on table and I have to deal with it :)
you could float it.. or you could probably just have that cell holding it set to text-align: right depends on what else is in it the cell whether you need just the nested table to the right.. (that doesn't work in all browsers)
<table width="100%" border="1">
<tr>
<td>
<table style="background: red;">
<tr>
<td>left</td>
</tr>
</table>
</td>
<td>
<table style="background: green; float: right">
<tr>
<td>right</td>
</tr>
</table>
</td>
</tr>
</table>
If you are able to use divs instead of table tags to contain the two, have a left and right div instead of your two TD tags like so:
<div class="left"><table></table></div>
<div class="right"><table></table></div>
Then just add some CSS
<style type="text/css">
.left, .right {
width:300px;
}
.left {
float:left;
}
.left table, .right table {
width:63%;
}
.right table {
float:right;
}
</style>
I would go that route as supposed to using tables. If it doesnt work though, you might need to change the display type of the td tags to block. That said, I haven't tried that before and I'm not sure how well it would work.
If you don't have any more content in the containing <td> you could float it to the right;
/* select nested tables in td's that have a preceding td sibling, effectively the second column */
table td + td table {
float: right;
}
jsfiddle demo
Keep these notes in mind:
Absolute positioning and floated children cause Great Collapse. So, your cell could get unpredictable for you.
Nested tables are not common these days. Maybe your design is wrong. Have you considered other designs. Maybe div elements inside a table cell, nesting a table inside a list item?
Table is a block level element in nature. That is, a table tries to fill its parent's width by default. So, to get to your result, you need to specify width for them.
My suggestion, keep far from tables. Use CSS positioning.
I have an HTML page in which I want my content to be centered but, within a specific table on that page, I need to have many of the cells be left-aligned and many to be right-aligned and one cell to be center-aligned. Here's a snippet of HTML & CSS that should give you an idea of what I'm trying to do:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
.contentWrapper {
width: 1000px;
border: 1px solid black;
margin: auto;
}
.centerAligned {
text-align: center;
}
.myTable td {
width: 200px;
text-align: left;
}
.myTable td.label {
text-align: right;
}
</style>
</head>
<body>
<div class="contentWrapper centerAligned">
<p>A label for this table...</p>
<table class="myTable" border="1" align="center">
<tr>
<td class="label">Label 1 (Right Aligned)</td>
<td>Value 1 (Left Aligned)</td>
<td class="label">Label 2 (Right Aligned)</td>
<td>Value 2 (Left Aligned)</td>
</tr>
<tr>
<td class="label">Label 3 (Right Aligned)</td>
<td>Value 3 (Left Aligned)</td>
<td class="label">Label 4 (Right Aligned)</td>
<td>Value 4 (Left Aligned)</td>
</tr>
<tr>
<td colspan="4" class="centerAligned">
<input type="button" value="Push Me!">
</td>
</tr>
</table>
<p>Some more content...</p>
</div>
</body>
</html>
I didn't really want to put a class into every single td just to handle how they should be aligned, so I opted to set a default alignment for ".myTable td" of left. This allowed me to leave all the "value" cells to be without a class, but I still need to define one for my "label" cells to get a right alignment for those.
When it comes to the button at the bottom, which I would like to be center aligned, I want to be able to use the class "centerAligned". Unfortunately, using it here doesn't do anything as the ".myTable td" class is considered "more precise" and that cell is given a left alignment instead of a centered one.
I'm using "centerAligned" in other places, so I don't want to simply do away with that class, nor do I want to change the name to something else. I can do this:
.centerAligned, .myTable td.centerAligned {
text-align: center;
}
That seems to work, but this whole thing seems kinda smelly to me. Is there a better way to handle styling these table cells to get the effect that I want without having to define a specific class for every single td?
Thanks!
Use col
Have a look here:
http://www.w3.org/TR/html401/struct/tables.html#h-11.2.4
Or here for XHTML
http://www.w3.org/TR/2004/WD-xhtml2-20040722/mod-tables.html#sec_26.2.
Why don't you just use a 'th' tag for your labels and put a css on that? That way you wont need to put a label class on all of the td 'labels'. So
.myTable th {
width: 200px;
text-align: right;
}
as mentioned in another answer this should be able to be done with colgroup and col but it can't and the colspan is the reason why, how would a 'colspanned' row know which col to take it's alignment from?
I would perhaps feel like suggesting :nth-child but I think it might suffer the same issue when a colspan was met, and you wouldn't get IE support so here's a fiddle which needs no classes and still uses specificity to get the desired result
working example based on opening code with a colspan - JSFIDDLE
You can use jQuery
$('#myTable tr td:eq(0)').css('text-align', 'left');
$('#myTable tr td:eq(1)').css('text-align', 'center');
$('#myTable tr td:eq(2)').css('text-align', 'right');
eq is zero based. So all first cells will be left aligned, all second cells will be center aligned and so on. Adjust to your needs.
You didn't quite describe which position the cells are that need to be right aligned vs. left aligned. But as Bazz suggested you can use col to set styles for all s in that col or maybe you can do the same with a style if your right-aligned cells are in the same row.
If you're able to use col, all you need is:
<table>
<col>
<col class="label">
<col>
<tr>...
Then
.label { text-align: right }
There's nothing wrong with the way you're doing it though...