I am trying to get rounded cells for my table but I am unable to execute css as border-radius is not working in my code i.e.,
table
{
border-spacing: 10px;
border-collapse: seperate;
}
<tr>
<td style=\"border:1px solid black; background-color:#FE0000; color:white; text-align:center;\"><b>xxxxxxxxxxx</b></td>
<td style=\"border:1px solid black; background-color:#F69546; color:white; text-align:center;\"><b>xxxxxxxxxxx</b></td>
<td style=\"border:1px solid black; background-color:#92D14F; color:white; text-align:center;\"><b>xxxxxxxxx</b></td>
here I am using tcpdf and html
Give border-radius for child element of the td .
td b{
border: solid 1px #ccc;
border-radius: 50%;
display:block;
padding: 10px;
width:100px;
height:100px;
}
<table>
<tr>
<tr>
<td style=\"border:1px solid black; background-color:#FE0000; color:white; text-align:center;\"><b>xxxxxxxxxxx</b></td>
<td style=\"border:1px solid black; background-color:#F69546; color:white; text-align:center;\"><b>xxxxxxxxxxx</b></td>
<td style=\"border:1px solid black; background-color:#92D14F; color:white; text-align:center;\"><b>xxxxxxxxx</b></td>
</tr>
</table>
You should use php singular quotes ' ' with html with double quotes on attributes " "
See : LINK (SO Question)
UPDATED: added table opening and closing tags and tr closing tag
change $html to
$html ="
<table>
<tr>
<td style=\"border:1px solid black; background-color:#FE0000; color:white; text-align:center;\"><b>xxxxxxxxxxx</b></td>
<td style=\"border:1px solid black; background-color:#F69546; color:white; text-align:center;\"><b>xxxxxxxxxxx</b></td>
<td style=\"border:1px solid black; background-color:#92D14F; color:white; text-align:center;\"><b>xxxxxxxxx</b></td>
</tr>
</table>
";
to
$html ='
<table>
<tr>
<td style="border:1px solid black; background-color:#FE0000; color:white; text-align:center;"><b>xxxxxxxxxxx</b></td>
<td style="border:1px solid black; background-color:#F69546; color:white; text-align:center;"><b>xxxxxxxxxxx</b></td>
<td style="border:1px solid black; background-color:#92D14F; color:white; text-align:center;"><b>xxxxxxxxx</b></td>
</tr>
</table>
';
also try using this to echo the css if not already included.
$html = "table { border-spacing: 10px; border-collapse: seperate; }";
or
$html = "td b { border-spacing: 10px; border-collapse: seperate; }";
TCPDF has a very limited CSS support. It doesn't support all attributes.
Currently, only the following CSS attributes are supported:
font-family
font-size
font-weight
font-style
color
background-color
text-decoration
width
height
text-align
Related
I'm trying to create a table with 4 columns and at least 12 rows with an overflow-y:scroll. The page is fully responsive. I understand that if I need to add a scrollbar to the table I need to make it display: block on thead as well as tbody. Now the problem that I'm facing is I can't have my trows to have 100% of the width. I've tried to tweak my code for hours now and cannot seem to reach any solution. Attaching the jsfiddle link below
https://jsfiddle.net/kuau4ace/
`
I am only trying to use HTML and CSS with this.
Kindly help!
<table>
By making thead and tbody to display:block you have changed the property of table,thats why tr don't take width:100%.
Try this code
$(document).ready(function(){
var body=$('.template_table').clone();
body.addClass('body');
$('.table-wrapper').append("<div class='table-body'></div>");
$('.table-body').append(body);
var curr = [];
$("table.body th").each(function(i) {
var tColumnWidth = $(this).width();
curr.push(tColumnWidth);
});
$("table:first-child th").each(function(i){
$(this).width(curr[i]);
});
$("table.body thead").empty();
$(".table-wrapper>table tbody").empty();
});
.template_table{
border:1px solid #000;
width:100%;
padding: 0;
}
.template_table thead{
background:#323333;
height: 30px;
width: 100%;
}
.template_table tbody{
height: 210px;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
}
.template_table th{
border:1px solid #000;
border-left:0;
border-right:0
}
.template_table th select{
background:none;
border:none;
border-right:1px solid #323232;
color:#fff;
padding:5px;
width:80%;
}
.template_table th{
width:330px;
}
.template_table th:first-child{
width:80px;
border:1px solid #000;
}
.template_table th:nth-child(2){
width:220px;
border:1px solid #000;
}
.template_table td:first-child{
width:80px;
}
.template_table td:nth-child(2){
width:220px;
}
.template_table td{
width:220px;
color: #c3bfbf;
border-bottom:1px solid #000;
}
.template_table tbody tr:hover td{
background:#676767;
color:#fff;
}
.template_table th{
border:1px solid #000;
border-left:0;
border-right:0;
}
.template_table th select{
background:none;
border:none;
border-right:1px solid #323232;
color:#fff;
padding:5px;
width:80%;
}
.template_table th:first-child{
width:80px;
border:1px solid #000;
}
.template_table th:nth-child(2){
width:220px;
border:1px solid #000;
}
.template_table td:first-child{
width:17%;
}
.template_table td:nth-child(2){
width:37%;
}
.template_table td:nth-child(3) {
}
.template_table td{
color:#807c7c;
border-bottom:1px solid #000;
}
.template_table tbody tr:hover td{
background:#676767;
color:#fff;
}
tbody tr{
cursor:pointer;
}
.table-wrapper {
width: calc(100% - 20px);
}
.table-body {
height: 200px;
overflow-x: hidden;
overflow-y: auto;
width: calc(100% + 15px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="table-wrapper">
<table class="col-xs-12 template_table">
<thead>
<tr>
<th></th>
<th>
<select>
<option>Page Name </option>
</select>
</th>
<th>
<select>
<option>Template</option>
</select>
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Video Source 1 </td>
<td>Video Clip</td>
</tr>
<tr>
<td></td>
<td>ManningL3 </td>
<td>Player L3</td>
</tr>
<tr>
<td></td>
<td>Boyriven </td>
<td>Talent ID</td>
</tr>
<tr>
<td></td>
<td>Halftime Stats </td>
<td>Full Screen Stats</td>
</tr>
<tr>
<td></td>
<td>Locator </td>
<td>Full Screen Locator</td>
</tr>
<tr>
<td></td>
<td>Locator </td>
<td>Full Screen Locator</td>
</tr>
<tr>
<td></td>
<td>Locator </td>
<td>Full Screen Locator</td>
</tr>
<tr>
<td></td>
<td>Time </td>
<td>Bug</td>
</tr>
<tr>
<td></td>
<td>Singular Info </td>
<td>Topic L3</td>
</tr>
<tr>
<td></td>
<td>Los Angeles</td>
<td>Locator</td>
</tr>
<tr>
<td></td>
<td>Lewandowski </td>
<td>Player L3</td>
</tr>
<tr>
<td></td>
<td>Lewandowski </td>
<td>Player L3</td>
</tr>
</tbody>
</table>
</div>
So I've been trying to figure out how to code exactly the same table as it is shown in this picture:
But with no results. I've no idea how to divide it with different colours so the green overlaps others and keeps the words in each grid.
I'd be very thankful if someone helped me to gave me some ideas please.
Here is a WORKING JSFIDDLE for you.
table{
border-collapse: collapse;
font-size: 24px;
}
table tr td{
border-top: 5px solid #9F2C2F;
border-right: 5px solid #057C08;
}
table tr th:first-child{
border-top: 5px solid yellow;
border-right: 5px solid #057C08;
}
table tr td:last-child{
border-right: none;
}
Another working css could be:
http://jsfiddle.net/wpwu5mfs/1
td, tr, table{
border-collapse: collapse;
}
td{
border-top: solid 4px red;
}
td:first-child{
border-top: solid 4px yellow;
}
td:not(:first-child){
border-left: solid 4px green;
}
<style type="text/css">
table
{
border-collapse: collapse;
}
table tr td:last-child
{
border-right: 0px;
}
.first
{
border-top:3px solid yellow;
}
.second {
border-top:3px solid red;
border-left:3px solid green;
border-right:3px solid green;
}
</style>
<table>
<tr>
<td class='first'>Virsraksts 1</td>
<td class='second'>suna 1</td>
<td class='second'>suna 2</td>
</tr>
<tr>
<td class='first'>Virsraksts 2</td>
<td class='second'>suna 3</td>
<td class='second'>suna 4</td>
</tr>
<tr>
<td class='first'>Virsraksts 3</td>
<td class='second'>suna 5</td>
<td class='second'>suna 6</td>
</tr>
</table>
I am new in CSS.I have a Table Like this
<table id="datatable">
<tbody>
<tr>
<td><strong>2013</strong></td>
<td> </td>
<td><strong>144</strong></td>
</tr>
<tr>
<td><strong>2012</strong></td>
<td> </td>
<td><strong>159</strong></td>
</tr>
<tr>
<td><strong>2011</strong></td>
<td> </td>
<td><strong>147</strong></td>
</tr>
<tr>
<td><strong>2010</strong></td>
<td> </td>
<td><strong>137</strong></td>
</tr>
<tr>
<td><strong>2009</strong></td>
<td> </td>
<td><strong>303</strong></td>
</tr>
And I need to style this table as shown below.I have tried something but I can't able to style like that
I just tried
.datatable td {
border-bottom: 1px solid black;
}
Based on the image below,I need first td border as green and others are black.
Can any one help?Thanks in advance for help.
In your code, datatable is an ID not a class. Update your CSS like below.
#datatable tr:first-child td{
border-bottom:1px solid green;
}
#datatable tr td{
border-bottom:1px solid black;
}
#datatable
{
border-collapse:collapse;
}
DEMO
try this one
<table class="datatable">
<tbody>
<tr>
<td ><strong>2013</strong></td>
<td> </td>
<td><strong>144</strong></td>
</tr>
<tr>
<td><strong>2012</strong></td>
<td> </td>
<td><strong>159</strong></td>
</tr>
<tr>
<td><strong>2011</strong></td>
<td> </td>
<td><strong>147</strong></td>
</tr>
<tr>
<td><strong>2010</strong></td>
<td> </td>
<td><strong>137</strong></td>
</tr>
<tr>
<td><strong>2009</strong></td>
<td> </td>
<td><strong>303</strong></td>
</tr>
</table>
In css
.datatable td{
border-bottom:1px solid black;
}
.datatable
{
border-collapse:collapse;
}
.datatable tr:first-child td{
color:green;
border-bottom:1px solid green;
}
You can see it from here
http://jsfiddle.net/ZKv68/2/
use this css
DEMO
.green {
color: green;
}
#datatable td {
border-bottom: 1px solid black;
}
#datatable {
border-collapse: collapse;
}
look here
#datatable{
border-collapse:collapse;
}
#datatable td{
padding-left:4px;
padding-right:4px;
}
#datatable tr{
color:#444444;
border-bottom:2px solid #999999;
}
#datatable tr:first-child{
color:green;
}
. represents class..# represents id...so, change .database to #database in css.
try this:
<tr class=green>
<td><strong>2013</strong></td>
<td> </td>
<td><strong>144</strong></td>
</tr>
<tr class=black>
<td><strong>2012</strong></td>
<td> </td>
<td><strong>159</strong></td>
</tr>
and in css:
#datatable tr.green {
border-bottom: 1px solid green;
}
#datatable tr.black {
border-bottom: 1px solid black;
}
Add following CSS in your styles
#datatable{
border-collapse: collapse;
}
#datatable td{
border-bottom:1px solid black;
color:#000;
}
#datatable tbody tr:first-child td{
color:#00FF00;
}
here is a live example
http://jsfiddle.net/Ycyyn/
You have a mistake in your CSS. Use #datatable instead of .datatable.
Apply a class or ID to your first row and use something like:
<tr class="green">
<td><strong>2013</strong></td>
<td> </td>
<td><strong>144</strong></td>
</tr>
CSS:
.green{
color:green;
}
You can also use
table tr:first-child {
color:green;
}
instead
If you are using id, then you need to use # to reference it in CSS. Dot is for class.
To reference just the first row, you can use 'first-child'
Example:
#datatable td{
border-bottom:1px solid black;
}
#datatable tr:first-child td {
border-bottom:1px solid green;
}
First of all <table id="datatable"> here you declare an ID and in your CSS .datatable td a class. You have to use # for selecting IDs
Just add this CSS:
#datatable tr:first-child td{
border-bottom:1px solid green;
color:green;
}
#datatable td{
border-bottom:1px solid black;
}
#datatable {
border-collapse: collapse;
}
DEMO
I have a HTML table I am displaying in a UIWebView on my ios app. The table looks sweet however the table border and the <tr> or cell borders is overlapping the main table border.
Here is an example:
I am using CSS to style these borders and adding it to the html as classes. This is what my style sheet looks like.
<style type='text/css'>table.tdat{border-collapse:collapse;border-color:#000000; border-style:solid; border-width:1px;}td{padding:2px; font-family:Helvetica; color:black; font-size:12pt; height:15pt; text-align:right; vertical-align:top; white-space:nowrap;}tr.cta td{font-family:Arial; color:black; font-size:12pt; height:15pt; text-align:right;vertical-align:top;white-space:nowrap;border:1px solid #eeeeee;}tr.top td { border-top: thin solid black; }tr.bottom td { border-bottom: thin solid black; }tr.ax td:first-child { border-left: thin solid black; border-right: thin solid black;} </style>
This is from a NSString and I'm not 100% sure on css formatting as I have only ever used it while making iOS apps.
And then I use that CSS like this:
<table frame="box" class="tdat">
<tr class="cta top ax">
<td>Position:</td>
<td width="20">1</td>
<td width="20">2</td>
<td width="20">3</td>
<td width="20">4</td>
<td width="20">5</td>
<td width="20">6</td>
<td width="20">7</td>
<td width="20">8</td>
</tr>
<tr class="cta bottom ax">
<td>Axis A:</td>
<td>4</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>1</td>
<td>3</td>
<td>3</td>
<td>2</td>
</table>
It's because you are setting borders on the top and bottom of the td, meaning that the side borders are going up an extra pixel The side borders show 'on top' of the top and bottom borders it seems. You can fix this with some tweaks. I'd add cellspacing="0" to the table HTML and remove border-collapse: collapse;. Then just style borders accordingly.
table.tdat{
/*border-collapse:collapse; remove */
border: 1px solid black;
}
td{
padding:2px;
font-family:Helvetica;
color:black;
font-size:12pt;
height:15pt;
text-align:right;
vertical-align:top;
white-space:nowrap;
}
tr.cta td{
font-family:Arial;
color:black;
font-size:12pt;
height:15pt;
text-align:right;
vertical-align:top;
white-space:nowrap;
border:1px solid #eeeeee;
border-top: 0; /* ADD */
border-bottom: 0; /* ADD */
}
/*tr.top td {
border-top: thin solid black; REMOVE
}*/
tr.bottom td {
/*border-bottom: thin solid black; REMOVE*/
border-top: 1px solid #eee;
}
tr.ax td:first-child {
/*border-left: thin solid black; REMOVE */
border-right: thin solid black;
border-top-color: black;
}
http://jsbin.com/IQuYIBI/1/edit
I'm new to html and I'm trying to create tables and style them but they are not styled as I'd like: http://jsfiddle.net/DpLy5/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tabeller</title>
<style>
body{
padding-top: 20px;
padding-left: 20px;
}
</style>
</head>
<body>
<table style="border: 1px solid black;">
<tr>
<td style="width: 700px; height:150px; border: 1px solid black;">
<img src="http://placehold.it/700x150">
</td>
</tr>
<tr>
<td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
<td style="width: 400px; height:700px; border: 1px solid black;">adad</td>
<td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
</tr>
<tr>
<td style="width: 700px; height:75px; border: 1px solid black; background-color: #808080;"></td>
</tr>
</table>
</body>
</html>
The middle row first column should be 150px wide but its bigger then that. I don't know what it could be. Any help? Thank you
You need to add a colspan='3' on your first and third row tr. As you have it set to 700px and it's a single column it will push the one above/below it to the same:
http://jsfiddle.net/spacebean/DpLy5/1/
<table style="border: 1px solid black;">
<tr>
<td style="width: 700px; height:150px; border: 1px solid black;" colspan='3'>
<img src="http://placehold.it/700x150">
</td>
</tr>
<tr>
<td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
<td style="width: 400px; height:700px; border: 1px solid black;">adad</td>
<td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
</tr>
<tr>
<td style="width: 700px; height:75px; border: 1px solid black; background-color: #808080;" colspan='3'></td>
</tr>
</table>
Also, I highly suggest using non-inline styling as it will make it a lot easier to see what you are doing and separate style from content.
http://jsfiddle.net/spacebean/DpLy5/8/
<table class='myTable'>
<thead>
<tr>
<th colspan='3'>
<img src="http://placehold.it/700x150" />
</th>
</tr>
</thead>
<tbody>
<tr>
<td>adad</td>
<td class='main'>adad</td>
<td>adad</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='3'></td>
</tr>
</tfoot>
</table>
css:
.myTable {
width: 700px;
}
.myTable td, .myTable th {
border: solid 1px black;
}
.myTable thead th {
height:150px;
}
.myTable tbody td {
width: 150px;
height:700px;
background-color: #808080;
}
.myTable tbody td.main {
width: 400px;
background-color: #fff;
}
.myTable tfoot td {
height:75px;
background-color: #808080;
}
Make the td in the first tr span the three columns using colspan="3" similar to the td in the last tr.
<td colspan="3" style="width: 700px; height:150px; border: 1px solid black;">
<img src="http://placehold.it/700x150">
</td>
JS Fiddle: http://jsfiddle.net/DpLy5/3/
you will need to add colspan="3" to in first row & last row... that's it.
http://jsfiddle.net/DpLy5/6/
<table style="border: 1px solid black;">
<tr>
<td colspan="3" style="width: 700px; height:150px; border: 1px solid black;">
<img src="http://placehold.it/700x150">
</td>
</tr>
<tr>
<td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
<td style="width: 400px; height:700px; border: 1px solid black;">adad</td>
<td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
</tr>
<tr>
<td colspan="3" style="width: 700px; height:75px; border: 1px solid black; background-color: #808080;"></td>
</table>
You are in need of the colspan attribute. The colspan attribute in fact says "Let me span this amount of column in the table".
Which means colspan="3" is translated to "Let me span 3 columns in the table"
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_span
However, according to your JSFiddle, you are trying to make a raster for your layout. Achieving this with the use of table's is a no-go, it's a major bad practice.
This is because a table is something where you put data in, and an entire layout is not data.
The best way to set up and layout is using Div's. http://www.w3schools.com/html/html_layout.asp