<style>
.topTable
{
border-top:1px solid #333333;
border-right:1px solid #333333;
}
.topTable td, th
{
border-left:1px solid #333333;
border-bottom:1px solid #333333;
}
.topTable .inner
{
border-width:0px;
position:relative;
top:0px;
left:0px;
height:100%;
width:100%;
}
.topTable .container
{
padding:0px;
border-width:0px;
position:relative;
}
</style>
<table cellpadding="4" class="topTable" cellspacing="0" style="background-color:#f0f0f0;">
<tr>
<th>Option A</th>
<td class="container">
<table cellpadding="4" class="inner" cellspacing="0" style="background-color:#f0a0a0;">
<tr>
<td>Part 1</td>
<td>Part 2</td>
</tr>
</table>
</td>
<td class="container">
<table cellpadding="4" class="inner" cellspacing="0" style="background-color:#a0f0a0;">
<tr>
<td>Part 3</td>
</tr>
<tr>
<td>Part 3</td>
</tr>
</table>
</td>
<td>Done</td>
</tr>
</table>
I need those tables within the TDs to be height:100% and nothing seems to work. I can't use rowspan in this case as the data will be dynamic in each sub table. I need some CSS that will force those tables to take up the full height of the td they're stored in. I thought this would be easy as I'm dealing with block elements but I must be missing something because it's simply not working no matter what tricks I try.
This is the best I could do:
http://jsfiddle.net/jc5qf/2/
Hope it gets you going down the right path.
Found a workaround using jQuery.
Someone had posted something similar to this and I modified it to meet these needs:
$(function () {
$('td.container').each(function () {
var $this = $(this);
var panelheight = $this.height();
$this.children('table.inner').height(panelheight);
})
});
Just have to make the class on each containing td be 'container' and the table inside it that needs to stretch to match the height of that container to 'inner' This jQuery will take over from there.
Related
P.S : Please don't mark as duplicate until you have read the entire question
I have a table where in I want to give fixed width to the columns as I want to display them dynamically. The width of the table is 100%. So in that table, only 1 column or 3 or 6, etc can be displayed. But the problem is if in a scenario I have only 1 column the data in that table occupies the entire 100% table even though i have given fixed width to the column. I want the column width to be fixed irrespective of the table width. Please guide where I am wrong. Below is the code I have been trying.
table {
table-layout: fixed;
word-break: break-all;
}
table td {
border: 1px solid;
overflow: hidden;
}
<table width="100%" cellspacing='0' cellpadding='0'>
<col width="100px" />
<col width="50px" />
<col width="50px" />
<tr>
<th>First Column</th>
<th>Second Column</th>
<th>Third Column</th>
</tr>
<tr>
<td>Text 1</td>
<td>text 2</td>
<td>text 3</td>
</tr>
</table>
Add hidden column to the end of table.
Table will be 100% width and resize hidden column than you resize the page.
Code example:
table
{
table-layout: fixed;
word-break: break-all;
border-collapse: collapse;
width:100%;
}
td
{
height:50px;
border: 1px solid;
}
th
{
height:50px;
border: 1px solid;
}
.F
{
width:100%;
border:none;
border-left:1px solid;
}
<table>
<col width='200px' />
<col width='100px' />
<col width='50px' />
<tr>
<th>First Column</th>
<th>Second Column</th>
<th>Third Column</th>
<th class='F'></th>
</tr>
<tr>
<td>Text 1</td>
<td>text 2</td>
<td>text 3</td>
<td class='F'></td>
</tr>
</table>
Here is the complete code.
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
height: 50px;
}
</style>
</head>
<body>
<h2>The width and height Properties</h2>
<p>Set the width of the table, and the height of the table header row:</p>
<table>
<tr>
<th>First Column</th>
<th>Second Column</th>
<th>Third Column</th>
</tr>
<tr>
<td>Text 1</td>
<td>Text 2</td>
<td>Text 3</td>
</tr>
</table>
</body>
</html>
Here is a slightly different approach. In this example, it will take an auto width table and then fix the width and column widths. I've found this useful where I have an auto width table that I want to filter without the table resizing.
This example makes use of the col and th elements on a well formed table.
The use of the fixed class is added so that the table can be reset easily.
/*jQuery - mistajolly - fix table widths*/
var table = $(this);
if(!table.hasClass('fixed')){
table.width(table.outerWidth(true));
table.addClass('fixed');
var cols = table.find('col');
table.find('th').each(function(index){
$(cols[index]).width($(this).outerWidth(true)).addClass('fixed');
});
}
/* Reset and remove fixed widths */
if(table.hasClass('fixed')){
table.removeClass('fixed').css('width','');
table.find('.fixed').each(function(index){
$(this).removeClass('fixed').css('width','');
});
}
I have different tables in my page which should have different border, cellpadding etc. I can create many classes like,
.pad5 td {padding:5px}
and then using,
<table class="pad5">
But if I use 'table' is css, the style is applied to all tables. How can I achieve the result?
You can try to add an ID to each table and in css make reference with this ID like:
CSS & HTML:
#table1 tr td {
padding: 5px;
border: 4px solid #888;
}
#table2 tr td {
padding: 5px;
border: 4px solid red;
}
<table id="table1">
<tr>
<td>first content</td>
<td>second content</td>
</tr>
</table>
<table id="table2">
<tr>
<td>first content</td>
<td>second content</td>
</tr>
</table>
declare classes for each type of styling you want to create, and assign to the <table> in the html via the class attribute
css
.table1 {
...
}
.table2 {
...
}
html
<table class="table1">
...
</table>
<table class="table2">
...
</table>
You can give your tables class names also
Example HTML:
<table class="mytable">
<tr>
<td>My cell</td>
</tr>
</table>
<table class="anothertable">
<tr>
<td>My cell</td>
</tr>
</table>
Example CSS:
.mytable {
border: 1px solid black;
}
.anothertable {
border: 1px solid red;
}
The first table will have a 1px solid black border and the second table will have a 1px solid red border.
I found that if I don't use table at all in CSS it works.
e.g.- .cell {border-spacing:10px}
give each of them seperate ids. classes are for css which will be applied to a bunch of different objects, ids are for css which will be applied to specific objects
<table id="first_table"></table>
I have a table within a table. I have set table background-color to white.
The inner table's background is to remain white while all other cells of the outer table are set to lightgrey.
However, the outer table's white background-color is showing up as a border around all its <td> cells which I cannot figure out how to get rid of - all grey cells should be borderless. I have tried setting the border property of all elements to none without success. Any help would be appreciated.
Here is a jsfiddle
<style>
body{
background-color: lightcyan;
}
.gems {
margin:0 8px;
padding:0;
}
.gems table{
width:100%;
background-color:white;
}
.gems td {
padding:0px 1px;
margin:0;
}
.gems tr.filelist {
margin:5px;
background-color: lightgrey;
}
.gems tr.tools {
background-color: lightgrey;
}
div.textarea {
background-color: white;
}
</style>
<body>
<div class="gems">
<table>
<tr class="filelist">
<td>filelist</td>
<td>filelist</td>
</tr>
<tr class="tools">
<td>tools</td>
<td>
<div class="textarea">
This is a table
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</body>
<table cellspacing="0">
Add this property in your table tag.
Im creating a responsive table which contains a vertical divider. I want that divider to move along with the text according to all screen sizes. left and right td are responsive just the divider is creating problem.
The CSS is
.divider{
position: absolute;
left:30.5%;
top:6%;
bottom:25%;
border-left:2px solid #333;
overflow:hidden;
}
and the related html is
<table width="100%">
<tr>
<td>
this is test
</td>
<td><div class="divider"></div></td>
<td>
This is test2
</td>
</tr>
</table>
The problem is when I change the position from absolute to anything else in css it hides the divider.
In your case....its happening because i feel that your are giving position only to the div and not the containing <td>....give this parent td a position first
add height, width to html,body and your are good to go...
solution
CSS
html, body {
height:100%; /* added */
width:100%;/* added */
}
.divider {
position: relative; /* changed*/
left:30.5%;
top:6%;
bottom:25%;
border-left:2px solid #333;
overflow:hidden;
}
td.r {
position:absolute;/* added */
height:100%;/* added */
width:100%;/* added */
}
HTML
<table width="100%" border=1>
<tr>
<td>this is test</td>
<td class="r"> <!-- notice the added class-->
<div class="divider"></div>
</td>
<td>This is test2</td>
</tr>
</table>
EDIT
A much simpler and cleaner way to create divider is to use td only for divider, not the div....check this demo
Remove the div creating the divider and instead, add the divider class to td itself!
<table width="100%" border=0>
<tr>
<td>this is test</td>
<td class="divider"></td>
<td>This is test2</td>
</tr>
</table>
CSS
td {
text-align:center
}
td.divider {
position:absolute;
height:100%;
width:1px;
border:1px solid #000;
background:#000;
}
Using the following ASP.net/iTextSharp code to parse the contents of an HTML file into a PDF and dump it into the response stream:
Response.Clear();
Response.ContentType = "application/pdf";
using (Document doc = new Document())
{
PdfWriter writer = PdfWriter.GetInstance(doc, Response.OutputStream);
doc.Open();
using (TextReader reader = File.OpenText(Server.MapPath("~/Test.htm")))
{
XMLWorkerHelper.GetInstance().ParseXHtml(writer, doc, reader);
}
doc.Close();
}
Response.End();
This works, but the resulting PDF isn't styled anything like the original HTML page. For starters, the built-in css parser appears to only be able to work with direct tag styles and classes (no chaining like: thead th { background-color:#999; }).
Second, it appears borders are an all-or-nothing deal. It has no concept of border-top, border-bottom, etc, and border-collapse doesn't collapse the borders of adjoining cells so the borders end up being twice as thick as I want them.
Last, I cannot figure out how to align a table to the left- or right-side of the document. It is always centered. I tried wrapping in a div with text-align, tried setting the align attribute, tried setting text-align directly on the table. Can't figure that one out?
Here is my demo document I'm trying to use as a proof-of-concept:
<!DOCTYPE html>
<html>
<head>
<title>This is the title</title>
<meta name="description" content="This is the description" />
<meta name="keywords" content="abc, 123, xyz" />
<style type="text/css">
body { font-family:Arial, Verdana, Sans-Serif; font-size:9pt; }
.dataGrid { font-family:Arial, Verdana, Sans-Serif; font-size:9pt; border-collapse: collapse; border:1px solid #000; width:80%; margin:0; text-align:left; }
th { padding:3px 4px; font-weight:bold; border:1px solid #000; }
td { padding:3px 4px; border:1px solid #000; }
.head { border-bottom:2px solid #000; background-color:#9BBA1F; font-weight:bold; }
.odd { background-color:#fff; }
.even { background-color:#D6EB87; }
.foot { border-top:2px solid #000; background-color:#BAB0C4; font-weight:bold; }
h1 { font-size:14pt; color:#FFA200; text-align:center; }
.right { text-align:right; }
.center { text-align:center; }
.left { text-align:left; }
</style>
</head>
<body>
<h1>Sample Document</h1>
<div style="text-align:left;">
<table class="dataGrid" align="left">
<thead>
<tr class="head">
<th width="70%">Name</th>
<th width="15%" class="center">Qty</th>
<th width="15%" class="center">Price</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>ABC</td>
<td class="center">2</td>
<td class="right">$5.00</td>
</tr>
<tr class="even">
<td>XYZ</td>
<td class="center">1</td>
<td class="right">$10.00</td>
</tr>
<tr class="odd">
<td>123</td>
<td class="center">3</td>
<td class="right">$2.00</td>
</tr>
<tr class="even">
<td>789</td>
<td class="center">1</td>
<td class="right">$4.00</td>
</tr>
</tbody>
<tfoot>
<tr class="foot">
<td class="right">Totals</td>
<td class="center">7</td>
<td class="right">$30.00</td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
After spending a bunch of time on this I couldn't get it to work properly. As such, I ended up switching to another tool: wkHtmlToPdf. I used the Codaxy wrapper class available in Nuget to help create the calls, and am seeing much better results than I saw with iTextSharp. It mostly understands CSS selectors, and automatically handles things like images and links.