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
Related
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 using the DOCTYPE below for my pages and it keeps the page in Quirks mode and my table looks like the one in the link below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
http://talkingsoccer.net/inquirks.jpg
When I change the doctype to either of the ones below, the pages are taken out of quirks mode and use IE8 Standards mode (I'm using IE8) as shown in the link below.
<!DOCTYPE html> or <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
http://talkingsoccer.net/outofquirks.jpg
What can I do in CSS to make IE8 standards mode look like the table in Quirks mode (image shown at top link) and also in other major browses like Chrome, FireFox, IE8-IE12 and beyond?
Here is my code...
<style>
.link2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;
font-weight: bold; color: #333333; text-decoration: none}
</style>
<table width="100%" border="1" cellspacing="3" cellpadding="2" bgcolor="#B5CBE7">
<tr>
<td>Home Page</td>
</tr>
<tr>
<td>Affiliate Program</td>
</tr>
<tr>
<td>Order Catalog
</td>
</tr>
<tr>
<td>Privacy Policy
</td>
</tr>
<tr>
<td>Order Status</td>
</tr>
<tr>
<td>Return Policy</td>
</tr>
<tr>
<td><a href="http://www.example.com/cgi-bin/cybercart6.pl?action=order&
merchant=mysite" class="link2">View Shopping Cart</a></td>
</tr>
</table>
you have to create a div first and set the background that is your side image then create a table in that div margin-left the table for showing the bg image after that anchors, td, tr all the set padding and margin to 0 it will reduce the space between text and table border
I can't get the border width to be 3px solid green in firefox, even though it is working in Chrome. How can I fix this? My code is below.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style>
td {border: 3px solid green; background:blue;}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
To eliminate the spaces and avoid double borders between the cells you have to collapse them, like:
table {
border-collapse: collapse;
}
DEMO
Also it's a good idea to use some kind of CSS discrepancy eliminator, which can save you a lot of time and helps avoid situations like this - Normalize CSS or CSS Reset
here is the jsfiddle (http://jsfiddle.net/jw5Gg/1/) i added padding to give it some space. but really it had the border you just needed content. i hope this helped.
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%; }