I'd like to apply a style only to an outer element (a table), not for the nested on.
Due to the complexity of the system (and since I don't know for sure which other formats are used for the inner tables) I don't want to change the style for all elements first and then overwrite them for the nested ones (that's easy) but really only address the outer elements / tables (also I can't apply classes for now, because them I have to fix that I a bunch of code).
So I have something like that:
<body>
<div>
<...>
<table>
<tr>
<td>
<table>
<tr>
<td>
I'm some content!
</td>
</tr>
</table>
</td>
</tr>
</table>
<...>
</div>
</body>
CodePen: https://codepen.io/MichaelBootstrap/pen/bGBEbYy
First try was
body *:not(table) table:not(.no_tab_margin) {
border: thin solid green; /* just to visualise it */
}
(I use the class .no_tab_margin to stop that ugly fix on all pages, where I change the layout to responsive)
But due to the right-to-left resolution of the browsers, this is still applied to all tables.
How do I have to change the CSS selector such that it only applies on outer tables?
To prevent typical answers: Yes, that would do, but overwrite/reset other styling from the inner tables:
table:not(.no_tab_margin) {
border: thin solid green;
}
table table:not(.no_tab_margin) {
border: unset; /* all borders from all inner tables are gone */
}
If I didn't find a solution with CSS I will write a small jQuery script (Apply a class on all outer tables), that will do that.
To stop discussions about nested tables: Yes, that's long outdated. But I can't change it right now. The system contains more than 500 form/pages, which are generated by PHP. And, yes - I will remove them step by step (and make it all responsive), but that's my job for the next2-3 years - no joke).
Same is also relevant for nested lists (<ul><li><ul> ...) so that not only a special question only for old systems.
You could add a Class or an ID.
And define the custom styles
Solution from pete solves it perfectly:
table:not(table table) {}
Related
I have an html table that is created using constant contact and and I would like to make it responsive and fit the container div holding it.
Here is the demo
I tried the following but this doesn't work as well
<table border="0" width="100%" cellspacing="0" cellpadding="0">
Table aren't great at being responsive and keeping their layout - so it's probably best to override their styles on smaller screens, like:
http://jsfiddle.net/wildandjam/E32Cq/
#media all and (max-width:768px){
table,tr, td, tbody, td p table div, table table{
width:100%!important;
float:left;
clear:both;
display:block;
text-align:center;
}
table img {
max-width:100%;
height:auto;
}
}
Pure css way to make a table fully responsive, no JavaScript is needed. Check demo here Responsive Tables
Here is css
<style>
.tablewrapper{width: 95%; overflow-y: hidden; overflow-x: auto;
background-color:green; height: auto; padding: 5px;}
</style>
And here is HTML Part
<div class="tablewrapper">
<table class="responsive" width="98%" cellpadding="4" cellspacing="1" border="1">
<tr>
<td>Name</td>
<td>Email</td>
<td>Phone</td>
<td>Address</td>
<td>Contact</td>
<td>Mobile</td>
<td>Office</td>
<td>Home</td>
<td>Residency</td>
<td>Height</td>
<td>Weight</td>
<td>Color</td>
<td>Desease</td>
<td>Extra</td>
<td>DOB</td>
<td>Nick Name</td>
</tr>
</table>
</div>
Additionally use can use jquery to add tablerapper on page load, if you don't want to manually add tableWrapper div around your table. Just use
$().ready(function(e){
$(document).find("table.responsive").each(function(e){
$(this).wrap("<div class="tablewrapper"></div>")
})
})
It'll be much easier if you don't use html elements that aren't designed to do this job. Tables are used for presenting data, not to hold layout.
If you really need to use tables you'll have to hide and show rows with media queries, which is a pretty bad practice.
If you decide to go with divs, you can float them setting different width in media queries depends on screen size.
I've been looking to your case and I have two answers for you.
The first one is the answer to the question "¿how to make your html table responsive?" (note: Spanish article, you may need chrome page translator for example)
The second one is "you should considere a more semantic markup" (tableless) for that content. Instead of using <table> you should use <ul><li> as follows:
<ul class="itemList">
<li class="item">
<img src="" alt="" />
<p>From</p>
<p class="price">25€<span>per person sharing</span></p>
</li>
</ul>
Then use external CSS to apply style:
.itemList {width: 100%} /*probably not necessary*/
.item {display:inline-block; width: 33%; max-width: /*here your desired max width*/}
.price span {display: inline-block} /*no cells, no floats = no problems*/
Finally you can use #media queries to creat your CSS breakpoints:
#media only screen and (max-width: 480px) {
.item {display:inline-block; width: auto; max-width:100%;}/*just as an example*/
}
Just let me know if you have any further questions
I try to make a lite rwd table extend without any other dependency libraries (ex: jQuery):
https://github.com/sean1093/html-rwd-table
You can simply use as follow:
<div id="myTable"></div>
var myTable = new rwdTableExtend("myTable");
myTable.initTable();
You can use bootstrap to make table responsive.
Define class as table-responsive to make table as responsive.
<div class="table-responsive">
<table class="table">
...
</table>
</div>
TL;DR:
I have a solution that works well for a lot of table implementations, given that you are formatting your tables well (table>thead>tr>th^^tbody>tr>td). Find my CodePen here. Depending on the data in your table, this may be a good mobilizing solution.
The Director's Cut
See my CodePen here.
This solution assumes you have built your tables nicely, meaning you are using thead with th and tbody with td. For example:
<table>
<thead>
<tr>
<th>A</th>
<th>S</th>
<th>L</th>
</tr>
</thead>
<tbody>
<tr>
<td>33</td>
<td>M</td>
<td>United States</td>
</tr>
</tbody>
</table>
Given that the table data isn't characterized by columns and columns of numeric values, this JS / CSS solution works well. You can see it in action on my employer's docs pages (SmartyStreets Documentation) and in human readable form on the CodePen snippet I built for it here. To see it working, resize the screen. Breakpoints are set differently on each implementation, because consistency. Here's how to implement it.
Tables are fed to the tableMobilizer function. Given that it is built on jQuery, this can be done for all tables on the page like so:
var tables = $(table);
tableMobilizer(tables);
You can definitely be more selective about how you mobilize tables with your selector if you need to be.
This will generate a new set of tables for each table passed in and append them after their respective source table. Each new table contains a row of a source table which is transformed with a 90 degree CCW rotation and paired with the table headings.
Old tables are dynamically classed with .hidden-small-down and new tables are classed with .hidden-medium-up for your CSS media queries.
New tables come classed with .mobile-tables (for a collection of all mobile tables generated by a single source table), .mobile-table (for each mobile table representation of a single source table row), .mobile-table-row (for a row in a mobile table), .mobile-table-key (for the first column of a mobile table), and .mobile-table-value (for the second column of a mobile table).
In your CSS, set up your media queries to hide / show the appropriate table views:
#media only screen and (min-width: 768px) {
.hidden-medium-up {
display: none;
}
}
#media only screen and (max-width: 768px) {
.hidden-small-down {
display: none;
}
}
With the media queries implemented, styling the tables is left to your discretion.
After Credits Scene
This is not a silver bullet solution. Visualizations using tabular data can be very complicated. As mentioned above, this solution isn't great for column-heavy tables. It also doesn't handle col and row spanning. As always, seriously consider whether or not you actually need to use a table in your layout (beyond the scope of this comment). If you do, this may be a good solution for mobilizing your tables.
Use media queries and width of your container and font sizes should be in percentage.
The problem here is actually with your table. As you can see, one of the bottom tables has an explicit width set, which is forcing the rest of your table to follow suit:
<table id="content_LETTER.BLOCK1" style="height: 21px;" border="0" width="798" cellspacing="0" cellpadding="0">
Notice the width="798". This will default to pixels. Get rid of any explicitly defined widths and the table should become closer to being responsive.
However, as others have said - responsive tables are tricky. Especially ones containing so many other nested tables (as in your example). You'll also need to address the responsiveness of any images within those tables, as these will likely force the table to be bigger than it needs to be. I would re-visit your whole layout here, and try and adopt a more responsive-friendly element to use throughout your page.
Update:
Please note that the reason #wildandjam's answer 'works' is essentially because he's overwritten the set width of all of your table elements. It's a quick fix but in my opinion it doesn't bridge the gap of understanding.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I would like to tweak a few tables in order to get the best possible presentation of my interface. Is there a good practice way to specify the widths of table columns? (e.g. If I want to display the first column as 100px wide, the second as 80px wide and the third as 60px wide.)
I took a look at HTML Table column width practices however the selected answer (while useful for the user asking the question) did not describe how this could be done.
Another answer to that question suggested using <col> to assign a class to each column and then determine the width in CSS. However, this seems inelegant and a commenter suggests issues with the <col> tag. Also, I believe it has been deprecated in HTML5?
HTML
<table>
<col class=width100>
<col class=width80>
<col class=width60>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</table>
CSS
width100 {
width: 100px;
}
width80 {
width: 80px;
}
width60 {
width: 60px;
}
This seems rather inelegant, and I am unsure over the reliability / deprecation of the <col> tag. Is there a better way?
I will split your question into two parts and answer the second part first:
Part 2: However, this seems inelegant and a commenter suggests issues
with the tag. Also, I believe it has been deprecated in HTML5?
No. It has not been deprecated in HTML5. In fact, colgroup and col together are very important elements as part of the table.
e.g. have a look at this ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col
...defines a column within a table and is used for defining common
semantics on all common cells...
Further down it says:
CSS properties and pseudo-classes that may be specially useful to
style the element: the width property to control the width of
the column;...
Going by this ref: http://www.w3.org/TR/2012/WD-html-markup-20120329/col.html#col
The width attribute on the col element is obsolete. Use CSS instead
To summarize, you would be better off using colgroup and/or col to layout your tables. They help you to define common semantics on all corresponding cells. CSS is the recommended method to apply widths, which helps keep the presentation of the table separate from the markup. Using colgroup and/or col will actually save you a lot of trouble and gives you greater control on your table(s).
Part 1: Is there a good practice way to specify the widths of table
columns? (e.g. If I want to display the first column as 100px wide,
the second as 80px wide and the third as 60px wide.)
Again, if you refer to the docs you will find that delegating widths to CSS via col is a good practice to follow. Ideally, you would want to use a consistent unit for widths for your entire app/website. If you are using a fluid layout having percentages, then it makes perfect sense to keep percent units for your tables as well. If you are designing for a pixel-grid layout, then pixels would be better fit for your tables.
Delegating the presentation part to CSS will also help you in implementing a responsive layout if required.
Edit:
Regarding the issue you describe of people saying CSS class names should necessarily "identify classes of elements on the page, not scalar values to be applied within the styling" and that it is not semantic and all that stuff:
I don't personally agree to that.
IMO: See this: (http://getbootstrap.com/css) as an example. Although bootstrap is not using widths (verbatim) in names, but it does use metrics as part of class names. e.g. col-xs-6 (a column which is extra small spanning 4 columns). By all means, name your classes in a way which suits you and is easy to understand. Go ahead, create your own naming convention.
To avoid repeating the class in each td element, you could try using pseudo classes to select the nth td in your table.
Something like this:
td:nth-child(1){
color: red;
width: 100px;
}
td:nth-child(2) {
color: blue;
width: 80px;
}
td:nth-child(3) {
color: green;
width: 60px;
}
To cover table header cells:
th:nth-child(1){
color: red;
width: 100px;
}
th:nth-child(2) {
color: blue;
width: 80px;
}
th:nth-child(3) {
color: green;
width: 60px;
}
More info on :nth-child (and pseudo classes) here: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
Yes, It's bad practice to add columns, we can give width directly th or adding specific class, no need to add new more code for col.
Demo
Using Compass, I am generating Image Sprites and CSS.
This works great, however, since I am generating numerous sprite images and CSS, mapping the image to the class names can take quite some time for myself and the other developers.
I have currently created some regular expressions in DreamWeaver to allow me to generate an HTML page that displays the images, along with their corresponding class names, however, it is not the best layout as it just lists them in floating divs, and I would prefer to display them in either a tabular format using tables, or groups of 7 divs per row.
My code currently looks like...
...
<body>
<table>
<td class="sprite-container">
<div class="sprite-image myimage001"></div>
<div class="sprite-label">myimage001</div>
</td>
<td ... and so on...
I would like to either have a regular expression to wrap each group of 7 instances of the TD content with TR tags so that it will appear neat and tidy. (I've also done using just divs, etc, but since I am doing manually, this has been the easiest to maintain)
I have been currently doing this manually... counting every 30 rows from a td group and inserting the tags... this is monotonous, and since I am working with over 800 classes, takes quite some time to do... and I have to REDO every time I regenerate the sprites! ugh!
Alternatively, I am open to other suggestions as to how to better approach this... i.e. a script, tool, ruby gem, regular expression, etc.. Thanks in advance for any assistance. I hope that someone else finds this useful.
Note:
The Process I currently use is I copy the CSS file into a new document.
I remove any erroneous CSS (multiple sets).
I run the following regular expressions via find-replace
FIND > \{[\w\W]*?\}
REPLACE > NOTHING
FIND > .(sprite[\S]*)\s
REPLACE >
<td class="sprite-container">
<div class="sprite-image $1"></div>
<div class="sprite-label">$1</div>
</td>
Then I do my manual editing by adding the CSS references, HTML tags, etc to get it to display properly.
Thanks again in advance for any assistance you can provide!
Simplest way is to use a DIV instead of a TD.
<DIV class="sprite-container">
<div class="sprite-image $1"></div>
<div class="sprite-label">$1</div>
</DIV>
Then use CSS to style the sprite-container. All that's required is that sprite container be position: relative and float: left.
.sprite-container {
position: relative;
float: left;
margin: .5em;
min-width: 50px; min-height: 50px;
background-color: yellow;
}
Then use CSS :nth-child to make every element that is at the start of a new line of 7 spite-container's force a break in the floating layout.
.sprite-container:nth-child(7n+1) {
clear: left;
}
Here's a jsfiddle. http://jsfiddle.net/KQ59S/
Here, I am facing another problem with CSS.
My HTML string is coming from database and adding to DOM with HTML Object.
new HTML(result.getResponseObject().getStringResult());
That string contains some HTML tables and have border="1", that has been overridden by default CSS (you can see that in Firebug), where as the border applied in HTML like border="1"
How to tell that the applied styles are in HTML, not from any CSS file (or did I miss something in my code)?
I tried with 1px solid !important; it's still not working.
If I understand your question correctly you could do something like this:
table[border] {
border: 1px solid black;
}
This will select any table that has a html border property eg:
<table border="1">
but will ignore those that don't
Here's a demo
Why are you using the border attributed to begin with? In HTML5, it's meant only to indicate that <table> is being used to draw an actual table, rather than just for layout. If you want to specify a table border, you should use something like 3rror404's solution (although I would explicitly use table[border="1"] as the selector to avoid problems if you also have tables with border="0" anywhere in the document.
I currently have a java script solution to make an entire table row clickable. I need to support the non-java script folks so is this possible without java script?
I can add a a href tag to each cell but that seems like overkill and it also only lets the user click on the contents of the cell.
Any other alternatives to turn an entire table row into a hyperlink?
Not without putting a link inside each cell unfortunately, otherwise it's not valid markup.
You can still make it appear like the "row" is clickable though by making the links display as blocks so they take up the entire cell.
e.g. (jsFiddle)
<table>
<tr>
<td>Some text</td>
<td>more text</td>
<td>more text</td>
</tr>
</table>
tr:hover { background: #ddd; }
td { border: 1px solid #000; border-collapse: collapse; }
td a { display: block; padding: 5px 20px; }
I realise this is an old thread with a perfectly legit solution in Rich's answer. There is however also a way to do this without javascript AND without duplicating your link * the number of columns AND keeping your markup/CSS valid. It took me a while to figure out, so I thought I'd post it here for others that also happen to end up on this thread like I did.
Put the link in the first column:
<table class="search_results">
<tr>
<td>Some text</td>
<td>more text</td>
<td>more text</td>
</tr>
</table>
This is perfectly fine markup, so your only real issue is getting that link to span the width of your table. I did it like this using pretty standard CSS:
table.search_results a {position:absolute;display:block;width:98%;}
Change the width to whatever you want and in principle you are done and dusted. So that is all relatively easy, however if you, like me, have a fluid/responsive layout, and also some standard styling on your links plus some padding on your tables, you are going to need these rules (copied necessary from above and added extra).
table.search_results td:first-child {padding:0;}
table.search_results a {position:absolute;display:block;width:98%;max-width:1272px;font-weight:normal;color:#000;padding:.5em;}
table.search_results a:hover {background:none;}
table.search_results tr:hover {border-color:#25505b;background:#b5d6dd;}
To explain:
The first rule removes all padding on my first td ONLY. By default the padding on my td is .5em.
The second rule adds the same padding back on the link, otherwise you end up with misaligned cell contents. It also corrects a few standard styles I have on my a to ensure the columns all look the same. You could do this the other way around too (add the link styles to your td).
With the last two rules I get rid of the default hover effect on my links, then put it on the tr for any tables with the right class.
This works in the browsers I care about, but you should of course test in those you care about :) Hope I help save someone some minutes with this writeup!
Various browsers may or may not allow you to wrap the entire TR with an href, HOWEVER, even if the browser supports this, it is not valid (X)HTML and the results will vary from browser to browser in a very unreliable way (updates could change behavior as well).
Your best bet is to either use JS, or put an href inside of each cell.