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
Related
I have a JSF app and I generate <table>s dynamically based on some data.
For each cell I dynamically generate the css class and I write all the classes in the *.jsf File (using ResponseWriter)
A simplified resulting page:
<div id="styles">
<style type="text/css">
cell1 {
color: red;
}
cell2 {
color: blue;
}
cell3 {
color: black;
}
cell4 {
color: green;
}
</style>
</div>
<table style="width:100%">
<tr>
<td class="cell1">Jill</td>
<td class="cell2">Smith</td>
</tr>
<tr>
<td class="cell3">Eve</td>
<td class="cell4">Jackson</td>
</tr>
</table>
The table can be very big and it is possible for cells to share the same style.
The cell styles can change based on some user input in the table. I can update the cell on ajax request overriding UIComponent.visitTree(VisitContext context, VisitCallback callback)
but I have no idea if and how I can add additional css classes.
I think I have found a solution: inside UIComponent.visitTree(VisitContext context, VisitCallback callback) I can rewrite the cell (<td>) and add the <style type="text/css"> tag as child of the <td> tag adding the new CSS classes to it.
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.
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>
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%; }