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>
Related
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.
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 am writing my first CSS lines. I want to align all rows of the same block together but I am not sure how to do this. This is what I am trying to do:
Using regular HTML I would have created a table with as many rows as days and 2 columns. However since CSS is about separating content from presentation I think this violates the principles of CSS. I am thinking that the needed code will have the form:
<div>
<div>days</div><div>hours</div>
</div>
but I am not sure how the CSS should look like. I don't even understand the CSS defines exactly where to load the different areas.
Thank you
Always use table for table structured data, so that it can be easily styled using css like the way you wanted.
Also Table will be easier to understand when one looks at the source!
What if the developer later wants to have a striped row or a hover over effect on a row or a column? so use table and leave all the styling part to be dealt in CSS.
here is a typical html and CSS for your need, view it in jsfiddle
HTML
<table id="schedule">
<tbody>
<tr>
<td>monday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>tuesday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>wednesday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>thursday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>friday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>saturday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>sunday</td>
<td>closed</td>
</tr>
</tbody>
</table>
CSS
#schedule td:first-of-type
{
text-transform: capitalize;
text-align: left;
padding-right: 10px;
}
#schedule td:last-of-type
{
text-align: center;
padding-left: 10px;
}
I have created a fiddle that should solve your problem.
Here is the link to the fiddle
Below is the HTML and CSS Code
HTML
<div id="outer">
<div class="push-left">Monday</div>
<div class="push-right">8am to 6pm</div>
<div class="clearfix"></div>
<div class="push-left">Tuesday</div>
<div class="push-right">8am to 6pm</div>
<div class="clearfix"></div>
<div class="push-left">Wednesday</div>
<div class="push-right">8am to 6pm</div>
<div class="clearfix"></div>
<div class="push-left">Thursday</div>
<div class="push-right">8am to 6pm</div>
<div class="clearfix"></div>
</div>
CSS
#outer{
width:170px; //width of the container
}
.push-left{
float:left; //pushes the element to the left
}
.push-right{
float:right; //pushes the element to the right
}
.clearfix{
clear:both; //clears any applied floats
}
Hope this solves your problem!
Try
dayshours
Then CSS
.holder{
clear:both;
}
.test{
width:200px;
}
The holder will keep the lines separate
And the test will define 200px or what ever width you want to each field
Either that or use tables
Our build software has a web interface that reports build status using a table. When a build is pending, it outputs the last log message in an inner table. These log messages can be very, very long.
This is a distilled version of the HTML emitted:
<html>
<head>
</head>
<body>
<table id="StatusGrid" class="SortableGrid">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
<tr class="buildstatus">
<td colspan="11">
<table>
<tr>
<td>hello</td>
<td>...........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
If you display this HTML in your browser, you have to vertically scroll to see the entire contents of the table. I don't want this. I never want the table to extend outside the vertical width of the browser window. I don't mind truncating/clipping the extra-long text in the inner table.
I tried word-break: break-all, but that only works in Chrome. I have to support IE 9 and the latest versions of Chrome and Firefox.
The final wrinkle: I have to use CSS to fix this. I only have access to the application's stylesheet, and not the HTML.
What do you think? Possible?
Try putting a fixed height on the td and set its overflow or overflow-y to hidden;
tr.buildstatus td{
height: 500px;
width: 600px;
overflow:hidden; /* or overflow-y:hidden; */
}
This should work for you. You may have to adjust height/width to your taste.
tr.buildstatus tr td + td {
height:100px;
width:200px;
overflow:hidden;
}
table {
table-layout:fixed;
width:600px;
height:200px;
}
Live example: http://jsfiddle.net/R8nmk/
Try overflow: hidden.
The overflow is clipped, and the rest of the content will be invisible.
More about overflow here.
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%; }