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%; }
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 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 have an html table inside a primefaces panel. I'm using the primefaces panel for its collapse functionality.
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>demo</title>
</h:head>
<h:body>
<h:outputStylesheet library="css" name="demo.css"/>
<p:panel id="toggleable" header="Panel header" toggleable="true">
<table style="width:100%">
<tr>
<th>Forename</th>
<th>Surname</th>
<th>Age</th>
<th>Country</th>
<th>City</th>
<th>Occupation</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith Jones Dunhill</td>
<td>50</td>
<td>England</td>
<td>London</td>
<td>Deep sea diver</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>Scotland</td>
<td>Glasgow</td>
<td>Truck Driver</td>
</tr>
</table>
</p:panel>
</h:body>
</html>
With a stylesheet
th{
background-color: Yellow;
border: 1px solid Green;
}
td{
border: 1px solid blue;
}
.ui-panel .ui-panel-content {
padding: 0;
}
table{
overflow-x:scroll;
}
The page looks ok until I make the browser window smaller. Then, the table spills outside of the panel area.
I was supposing that I could make a horizontal scrollbar appear in the table, once it can collapse no further, but this doesn't work.
Could anyone tell me how to deal with this issue? I'm actually wanting a jsf datatable on the panel, but I'm supposing any solution this simpler situation would still apply.
In response to Randy, as far as I can see, if I paste that code into jsfiddle, the primefaces component doesn't get rendered, so the problem can't be seen. I've put a demo here:
primefaces panel
Make the browser window narrower until the table can't collapse any more. The table is now spilling outside the panel area.
I'm using Firefox 45.0.1
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 learning CSS recently and got across this requirement in my project. My HTML looks like this.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div id="lvl1_nav">
<table border="0" cellpadding="0" cellspacing="1" width="100%">
<tbody>
<tr>
<td> </td>
</tr>
<tr>
<td id="leftheaderlogo" style="height: 25px !important;"
class="logoPadding" rowspan="2"></td>
<td width="25%"><span id="lvl1_nav_title"
style="font-weight: normal;">PRODUCT TITLE</span></td>
<td rowspan="2" width="75%">...</td>
</tr>
<tr>
<td width="25%"><span id="lvl1_nav_title"
style="cursor: default; font-weight: bold;">PRODUCT 2nd
Level Title</span></td>
</tr>
</tbody>
</table>
<select id="portalModuleGroups" class="modulemenu"
style="display: none;">
</select>
</div>
</body>
</html>
I dont have any option to use any other techniques other than CSS due to code limitations.
I am looking for the best options to replace the "PRODUCT TITLE" and "PRODUCT 2nd Level Title" using CSS. The main problem I am facing is, both the span's are having same id span id="lvl1_nav_title".
Is it possible?
Duplicate ID issue
Several others have pointed out the issue of the duplicate IDs. Yes, that makes your HTML non-conformant. Yes, bad things could happen. However, in practice it will work OK:
#lvl1_nav_title { color: purple; }
will apply the color to all the elements with that ID.
If it's possible to write JS, but for some reason not possible to change the multiple IDs, although you cannot address both elements with
document.getElementById('lvl1_nav_title')
because that just returns one element, you can address them with
document.querySelectorAll('[id=lvl1_nav_title]')
Cannot change HTML content with CSS
The basic roadblock you face is that you cannot change HTML content via CSS. Bottom line, you cannot do what you want without JS.
Therefore, at the end of the day, you really need to fix your HTML to have unique IDs, and in any case you'll have to use JS to replace text within the elements.
The ultimate hack with CSS
This is not recommended unless you absolutely, positively cannot touch the HTML or write JSS and must have a CSS-only solution.
The idea is to move the element way off to the edge of the screen, where it will be hidden. Then, apply an ::after pseudo-element providing the new text, positioned so it will be back where the the original element was supposed to be originally.
CSS:
span {
text-indent: -9999px;
display: block;
}
span::before {
position: relative;
top: 0;
left: 9999px;
}
span:first-child::before { content: 'NEW PRODUCT TITLE'; }
span:last-child::before { content: 'NEW 2nd LEVEL TITLE'; }
HTML:
<span id="lvl1_nav_title">PRODUCT TITLE</span>
<span id="lvl1_nav_title">PRODUCT 2nd Level Title</span>
Obviously, you will have to adjust things to work with your specific HTML structure, but this is the basic idea.