I am trying to set height for <tr> element of table as below but it is not working
.tsx tr { line-height: 20px; }
<table class="tsx">
<tr></tr>
Can you please let me know what I am doing wrong?
Tried your code and seems to be working fine. Try changing the line-height value. The value you are using (20px) may be equal to the default line-height value. Hence you may not be able to see the difference.
<html>
<head>
<style>
.tsx tr { line-height: 25px; }
</style>
</head>
<body>
<table class="tsx" border="1">
<tr>
<td>abc</td>
</tr>
</table>
</body>
</html>
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
If I want to treat the properties of a table imbedded in a cell differently than the outer table, what is required. I am new to CSS and do not have a handle on the cascading effect. A boiled downed example of my attempt is as follows:
<body>
<table><link rel="stylesheet" type="text/css" href="OuterTable.css">
<tr><th>Col1</th><th>Col2</th></tr>
<tr>
<td>
<table><link rel="stylesheet" type="text/css" href="InnerTable.css"><tr><th>InsideColA1</th><th>InsideColA2</th></tr></table>
</td>
<td>
<table><tr><th>InsideColB1</th><th>InsideColB2</th></tr></table>
</td>
</tr>
</table>
</b
Where the OuterTable.css specifies a pink background for the cells and InnerTable.css specifies yellow for the cells. Obviosuly, I am missing something basic as all header styles have a yellow background. What is the best method for styling an internal table.
a) Add class(inner and outer as shown below) to your table
b) remove your CSS file from table and add to head
c) just add the below style statements to your css.
<style type="text/css">
table.outer {
background-color:yellow
}
table.outer th {
// add style properties here
}
table.inner {
background-color:pink
}
table.inner th {
// add style properties here
}
</style>
<table class="outer">
<tr><th>Col1</th><th>Col2</th></tr>
<tr>
<td>
<table class="inner"><tr><th>InsideColA1</th><th>InsideColA2</th></tr></table>
</td>
<td>
<table><tr><th>InsideColB1</th><th>InsideColB2</th></tr></table>
</td>
</tr>
</table>
First, don't import CSS at the middle of your HTML code, put it on the <head> tag please.
You can style your HTML elements by "id" or "class", I'll make and example using class, check it:
<head>
<link rel="stylesheet" type="text/css" href="OuterTable.css">
<link rel="stylesheet" type="text/css" href="InnerTable.css">
<style>
.outerTable{
background-color:#FF0000;
}
.innerTable{
background-color:#FF00FF;
}
</style>
</head>
<body>
<table class="outerTable">
<tr><th>Col1</th><th>Col2</th></tr>
<tr>
<td>
<table class="innerTable"><tr><th>InsideColA1</th><th>InsideColA2</th></tr></table>
</td>
<td>
<table><tr><th>InsideColB1</th><th>InsideColB2</th></tr></table>
</td>
</tr>
</table>
</body>
Instead the class at <style> tag, you put your code at your .css files
see it working at: http://jsfiddle.net/U5cUK/
First off, all CSS files should be included in the <head> of your HTML document.
Now, if you want to target a nested table, all you have to do is use a descendant selector like this:
/*Define default color for cells*/
table th{
background-color: pink;
}
/*Override for headers inside a nested table*/
table table th{
background-color: yellow;
}
No need for a separate CSS file or custom classes or ids
See Demo fiddle
I have the following HTML:
<div class="wall" >
<table>
<tr>
<div class="tbr01"><th>Content</th></div>
<div class="tbr02"><th>User</th></div>
<div class="tbr03"><th>Published</th></div>
</tr>
</table>
</div>
How do i adjust the width of the th div.tbr01
This is what i've tried in my css file: but i am doing something wrong?
div.wall table tr div.tbr01 th {
width: 100px;
}
Regards,
Thijs
Your HTML is invalid.
You cannot have a <div> as a child of a <tr> or a parent of <th>.
Browsers will perform error recovery in various different ways and often give you a DOM that isn't like you expect (e.g. by moving all the div elements outside the table).
Get rid of the div elements and apply your styles directly to the table cells.
seems it doesn't like the div... apply the class to the th or use
div.wall table tr th {
width: 300px;
}
OR
<div class="wall" >
<table>
<tr>
<th class="tbr01">Content</th>
<th class="tbr02">User</th>
<th class="tbr03">Published</th>
</tr>
</table>
</div>
div.wall table tr th.tbr01 {
width: 300px;
}
I was wondering if anyone knew how to display data using XForms in a table format. I have a code that displays each column tag as rows however, I was wondering how I can display each column tag as columns. I'd like my output to display like this:
1 1 2
2 3 4
I am a beginner at XForms and have no idea about the basics so if anyone could help me out, that would be great.
Here is my code:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="xsltforms/xsltforms.xsl" type="text/xsl"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events">
<head>
<title>Table with CSS and Divs</title>
<xf:model><xf:instance>
<disp xmlns="">
<row><col>1</col><col>2</col></row>
<row><col>3</col><col>4</col></row>
</disp>
</xf:instance></xf:model>
<style type="text/css">
* {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
}
/* example of doing layout of a table without using the HTML table tags */
.table {
display:table;
}
.tableHeader, .tableRow, .tableFooter, .myRow {
display: table-row;
}
.leftHeaderCell, .leftCell, .leftFooterCell,
.rightHeaderCell, .rightCell, .rightFooterCell,
.myCell
{
display: table-cell;
}
.myCell {
padding: 5px 5px 5px 5px;
border: solid black 2px
}
</style>
</head>
<body>
<div class="table">
<xf:repeat nodeset="row" id="idrow">
<div class="myRow">
<div class="myCell"><xf:output ref="position()"/></div>
<xf:repeat nodeset="col" id="idcol">
<div class="myCell"><xf:output ref="."/></div>
</xf:repeat>
</div>
</xf:repeat>
</div>
</body>
</html>
XSLTForms substitutes XForms elements into HTML elements (have a look with a debugger to check this). Adding DIV elements is a problem with nested repeats.
This has been fixed for the TABLE/TR/TD structure because it can easily be detected by XSLTForms. DIV elements with table-* CSS properties are not in the same situation...
Here is an example working with XSLTForms:
<body>
<table>
<xf:repeat nodeset="row" id="idrow">
<tr>
<td>
<xf:output value="position()"/>
</td>
<td>
<table>
<tr>
<xf:repeat nodeset="col" id="idcol">
<td>
<xf:output ref="."/>
</td>
</xf:repeat>
</tr>
</table>
</td>
</tr>
</xf:repeat>
</table>
</body>
-Alain
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%; }