I'm trying to hide some col's in html code. Using MDN colgroup and col are added, and I'm playing with the style of the cols.
The <td> with content text 'visible' is visible in all browsers (good), the with content text 'hidden' is visible in chrome (bad) and hidden in Firefox and Edge. (good).
Shortest code I could re-create problem is here:
<!doctype html>
<html>
<head>
<title>css example</title>
<style type='text/css'>
col.visible {}
col.hidden { visibility:collapse; }
</style>
</head>
<body>
<table border='1'>
<colgroup>
<col class='visible'>
<col class='hidden'>
<tbody>
<tr>
<td>visible</td>
<td>hidden</td>
</tr>
</tbody>
</colgroup>
</table>
</body>
</html>
You are right, chrome doesn't properly support visibility:collapse for table rows and columns -- follow the bug for updates. We are planning on tackling it in the next few months but it probably won't show up in stable until the end of 2017. Sorry about the bad news.
The visibility: collapse should not be assigned to col, but td. This will work fine:
td.hidden { visibility:collapse; }
<body>
<table border='1'>
<colgroup>
<col>
<col>
<tbody>
<tr>
<td>visible</td>
<td class='hidden'>hidden</td>
</tr>
</tbody>
</colgroup>
</table>
</body>
If you want to hide all tds from a specific col, use td:nth-of-type(n) selector (replacing n with the index number of column).
As of Chrome 92, the symptoms are the same: <col style=visibility:collapse> renders the column invisible, but its width is not zero, so the table occupies the same width as if un-collapsed.
The idea of using <colgroup> + <col> is to avoid adding markup to every <td> in the column.
Related
I've been trying to get a table to span a two-column article container using column-span:all in my CSS-file. The spanning part works, but my problem is that I've got a couple of links inside my table that for some reason don't work in Chrome (v 85) and Ms Edge. By not working, I mean that I cannot click the links and while hovering over them, no change takes effect (a:hover does nothing). The issue doesn't seem to appear using Firefox or IE.
If I remove margin: 2em auto; the links work again, but then my table isn't centered.
So, the question is, how can I make a centered table that spans a two-column article container with still functioning links across Chrome, IE, FF, Safari (not tested) etc?
Is there perhaps an alternative?
MWE:
<html>
<head>
<style>
article{column-count:2;}
a{color:green;}
a:visited{color:red;}
a:hover{color:blue;}
a:active{color:yellow;}
table{column-span:all;margin:2em auto;}
</style>
</head>
<body>
<article>
<table>
<tr>
<td>google</td>
<td>unimportant text</td>
</tr>
<tr>
<td>duckduckgo</td>
<td>another unimportant text</td>
</tr>
</table>
</article>
</body>
</html>
<html>
<head>
<style>
article{column-count:2;}
a{color:green;}
a:visited{color:red;}
a:hover{color:blue;}
a:active{color:yellow;}
.center{
column-span:all;
margin:2em 0;
display:flex;
justify-content:center;
}
</style>
</head>
<body>
<article>
<div class="center">
<table>
<tr>
<td>google</td>
<td>unimportant text</td>
</tr>
<tr>
<td>duckduckgo</td>
<td>another unimportant text</td>
</tr>
</table>
</div>
</article>
</body>
</html>
I'm trying to get all of these images to line up in a table. For some reason it is adding extra space at the bottom of the cells. I've tried all of the different solutions that is suppose to fix this spacing issues.
What it's supposed to look like
What I'm Getting
Here's a look at my HTML5 code as well:
<!DOCTYPE html> <html>
<head>
<title></title>
<meta charset = "utf 8">
<style>
table{
border-collapse : collapse;
border-spacing : 0;
border:0;
}
tr,td{
border-collapse:collapse;
padding : 0;
border : 0;}
</style>
</head>
<body>
<table>
<tr>
<td><img src="tableImages\ul.gif" alt ="1,1"></td>
<td colspan = "2"><img src ="tableImages\top.gif" alt = "1,2"></td>
<td><img src="tableImages\ur.gif"alt="2,2"></td>
</tr>
<tr>
<td rowspan = "2"><img src="tableImages\left.gif"alt="2,1"></td>
<td><img src="tableImages\1.gif"alt="2,1"></td>
<td><img src="tableImages\2.gif"alt="2,1"></td>
<td rowspan = "2"><img src="tableImages\right.gif"alt="2,1"></td>
</tr>
<tr>
<td><img src="tableImages\3.gif"alt="2,1"></td>
<td><img src="tableImages\4.gif"alt="2,1"></td>
</tr>
<tr>
<td><img src="tableImages\ll.gif" alt ="1,1"></td>
<td colspan = "2"><img src ="tableImages\bottom.gif" alt = "1,2"></td>
<td><img src="tableImages\lr.gif"alt="2,2"></td>
</tr>
</table>
</body> </html>
I've come to the realization that the problem lies within HTML5, because if I remove <!DOCTYPE html> (meaning that the browser won't read it in 5) I don't have this problem.
If anyone could help me, Thank you very much!
So after some fiddling around to reproduce the problem, i found what is wrong (here a JSFiddle of the problem).
an image is by default displayed as a inline-block, this means that the height is calculated according to the font-size. It is expecting a font, so it has a font-size by default (see this answer for more info). There 2 ways of fixing this.
Make the image display as a block-element
Simply change the property display to block
img {
display: block;
}
JSFiddle
Explicity note that there is no font inside the cell
Simply change the font-size to 0
td {
font-size: 0;
}
JSFiddle
Note that i used the first <td> only as example, this should work with all of them
I have three entities in a row, currently I use table to display them:
<table>
<tbody>
<tr>
<td id='td1'>some text</td>
<td id='td2' style='width:600px;'>some text</td>
<td id='td3'>some text</td>
</tr>
</tbody>
</table>
What I need is to resize left and right cells simultaneously when browser resizes. I wonder if it is possible without JS.
I have even tried CSS resize which apparently does not work in IE, played with widths of the cells, but still without any success. I am totally a newbie in CSS.
Is it even possible? Thanks in advance.
Can't verify since I'm on a mobile but have you tried....
<table>
<colgroup>
<col class="first" />
<col />
<col class="last" />
</colgroup>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Then use the col.first and col.last classes to style them with css.
W3C: http://www.w3.org/TR/html-markup/col.html
Oh, and, remove all the css from your html. Having css inline will make the document completely unmaintainable through css files. And remove the IDs also from td:s and always use " to quote html attribute values.
You can also try to add:
table {
table-layout: fixed;
}
To prevent the browser from calculating the initial width of each cell according to their contents and give them all initially an equal width. (height will still expand according to content.) Then override certain columns with css.
try this css
table{
width:100%;
}
it works.
See this fiddle:
http://jsfiddle.net/uqJHf/
I have set the first column to show up with a red background.
However, the odd/even styling is overriding it. Even with added !important;
Is there any way I can get this fixed? (without having to add classes to the
tr.row_odd td {
background:#efefef;
}
tr.row_even td {
background:green;
}
.col1 { background:red !important; }
<table>
<col class="col1"></col>
<tr class="row_odd"><td>test</td><td>test</td></tr>
<tr class="row_even"><td>test</td><td>test</td></tr>
</table>
Firstly, lets deal with the markup. I believe that the <col> should be self-closing as it cannot contain any text or child elements and also it should be wrapped in a <colgroup>. You may even need additional <col> tags for each column (so 4 columns means 4 <col>'s).
<table>
<colgroup>
<col class="col1" />
<col />
</colgroup>
<tr class="row_odd"><td>test</td><td>test</td></tr>
<tr class="row_even"><td>test</td><td>test</td></tr>
</table>
Now, having had a little play about with the CSS, it seems it's down to how CSS is applied to columns and <tr>'s. If you remove the styles pertaining to the <tr>'s you will see that the style is applied correctly.
So from this i have concluded that the styles are applied in a layered approach, probably because of the columns being a kind of meta detail of tables. An easy way to imagine this is that the <tr> tags are layered on top of the column, and because you've defined a background-color for the <tr> the column styling does not show through - due to the colour being opaque. If you set the <tr>'s background-color to an RGBA value you will see that the columns colour "shines through".
See the modification of your fiddle, for demonstration: http://jsfiddle.net/uqJHf/4/
Hope that helps, it certainly helped me because i've learnt something new here myself during my investigation.
EDIT: seems that IE9 doesn't agree with what i said, it doesn't seem to apply the RGBA value to the <tr> if the <col> has a background-color set. Works in firefox 7 though...
td:first-child
{
background:red !important;
}
The Class from HTML <col> does not get inherited by <td>. You need to adh´just the HTML. Give class col1 to first <td> in table row
http://jsfiddle.net/uqJHf/6/
--
<table>
<colgroup>
<col class="col1" />
<col />
</colgroup>
<tbody>
<tr class="row_odd">
<td class="col1">test</td>
<td>test</td>
</tr>
<tr class="row_even">
<td class="col1">test</td>
<td>test</td>
</tr>
</tbody>
</table>
Can anybody tell me why the outer div is not expanding to the page width? Is there any solution for this without removing the doctype declaration(If I remove doctype, it is expanding) ? Also my page is in js disabled mode.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
<div style="border:1px solid #ff0000;">
<div>
<table class="storeList">
<thead>
<tr>
<th>
Country Code
</th>
<th>
Store ID
</th>
<th>
Store Name
</th>
<th>
TownName
</th>
<th class="actions">
Store Operation
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
TEST
</td>
<td>
TEST
</td>
<td>
hghjgdkjvhkjhvhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhjjjjjjjjjjjjjjjjjjjjhghjgdkjvhkjhvhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhjjjjjjjjjjjjjjjjjjjjdhgfdhf
</td>
<td>
TEST
</td>
<td class="actions">
TEST ACTIONS
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
This answer works, promise!
To your outermost div (<div style="border:1px solid #ff0000;">), add either:
float: left, or;
display: inline-block.
If you would like to see demos of these two fixes, check these older answers I provided:
How to fix table going outside of div tag in IE6 & 7?
Expand a div width to the width of the sibling table which has a lot of rows and causes vertical scroll
It would probably be because browsers apply their own default style, which include margins and padding on various elements. The body tag probably has default padding so you'd need to add a "reset CSS" file to your page to reset these defaults or just try:
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</style>
In the head of your page. Also, just to note, it looks like you're using tables for layout. This is a big no no in todays modern world of CSS:
http://www.hotdesign.com/seybold/
http://www.mardiros.net/css-layout.html
Why not use tables for layout in HTML?
You can also set your table to 100% width to cover the area provided by the div
table { width: 100%; }