I am trying to have the last row span the 3 rows of the previous row. However for some reason this is not working, I have rewritten the code several times in several different ways and cannot seem to get this to work:
CSS:
.div_walkthroughs_wrapper {
position:absolute;
height:100%;
width:100%;
margin:0;
padding:0;
border:0;
}
#table_walkthroughs {
margin:0 auto;
height:100%;
}
#table_walkthroughs td {
vertical-align:middle;
text-align:center;
padding:10px;
border:1px solid black;
}
HTML:
<body>
<div class="div_walkthroughs_wrapper">
<table id="table_walkthroughs">
<tbody>
<tr>
<td>
column 1
</td>
<td>
column 2
</td>
<td>
column 3
</td>
</tr>
<tr>
<td rowspan="3">this row wont spant 3 rows</td>
</tr>
</tbody>
</table>
</div>
</body>
I think you might be looking for the colspan property.
...
<tr>
<td colspan="3">this row wont spant 3 rows</td>
</tr>
...
Related
I want to keep the same width of <tr> of the two rows.
The first <tr> contains two <td> the second row contains only one <td> but as it is now, the second row is not with same width as the first one (see my script pleas)
How to keep the first row as it is and make the second one 100 width ?
table{
width:100%;
}
table tr td{
width:100%;
border:1px solid black;
border-collapse: collapse;
}
.second-row{
width:100%;
}
<table>
<tr class="first-row">
<td>hello</td>
<td>world</td>
</tr>
<tr class="second-row">
<td>hello world</td>
</tr>
</table>
use colspan
table{
width:100%;
}
table tr td{
width:100%;
border:1px solid black;
border-collapse: collapse;
}
.second-row{
width:100%;
}
<table>
<tr class="first-row">
<td>hello</td>
<td>world</td>
</tr>
<tr class="second-row">
<td colspan="2">hello world</td>
</tr>
</table>
I was wondering if it is possible to have the table embedded inside the td to have the same height as the td.
<table>
<tr>
<td style="background:red">
<table style="background:blue">
<tr>
<td>Hello</td>
</tr>
</table>
</td>
</tr>
</table>
Here is the jsfiddle... https://jsfiddle.net/ekh6z8w0/
As you can see through the fiddle the embedded table is off by a pixel or two. Is it possible to have the blue inside overlap the slight red border?
Remove the padding from td, should work.
td{
padding:0;
}
You can try like this: Demo
CSS:
table>td, table>td>table {
padding:0;
margin:0;
}
table table {
padding:0;
margin:0;
height:100%;
border:1px solid red;
background-color:blue;
color:#fff;
}
HTML:
<table>
<tr>
<td>
<table>
<tr>
<td>Hello</td>
</tr>
</table>
</td>
</tr>
</table>
Hope this is what you want.
how to give css for getting the page as follows in the same div. am having the data in the following way with more sub parts as in the second phase.
abcde
a production productions
limited
total
jackson
b productions productions
limited
the code am using is as follwos.
css
.label_left21 {
width: 20%;
float: left;
text-align:center;
line-height: 30px;
margin:0 10px 0 0;
word-wrap:break-word;
}
.text_right22 {
width: 20%;
float:left;
text-align:center;
}
.text_right23 {
width: 55%;
float:left;
}
html as
<div class="label_left21"><br><br><br><label>BUDGET</label></div>
<div class="text_right22"><br><br><br><label>PUBLIC</label></div>
<div class="text_right23"><label>State</label></div>
<div class="text_right22"><br><br><br><label>PRIVATE</label></div>
<div class="text_right23"><br><label>publication</label></div>
but it is not working the data is clashing if there are more sub parts
it would be easier if you use tables with rowspan ..and css can be used to adjust the width and margins of the cells here is the code
<!DOCTYPE html>
<html>
<body>
<table >
<tr>
<td rowspan="9">total</td>
</tr>
<tr>
<td rowspan="4">a production</td>
</tr>
<tr>
<td>abcde</td>
</tr>
<tr>
<td>productions</td>
</tr>
<tr>
<td>limited</td>
</tr>
<tr>
<td rowspan="4">a production</td>
</tr>
<tr>
<td>jackson</td>
</tr>
<tr>
<td>productions</td>
</tr>
<tr>
<td>limited</td>
</tr>
</table>
</body>
</html>
Here's the jsFiddle.
Here's the code :
<table>
<tr>
<td id="td00" rowspan="2">
<textarea>A very1 </textarea>
</td>
<td id="td01">
<textarea>A very2 </textarea>
</td>
</tr>
<tr>
<!--td>
<textarea>A very3 </textarea>
</td-->
<td>
<textarea>A very4 </textarea>
</td>
</tr>
</table>
The css :
table, td
{
border:1px solid black;
}
table
{
height:400px;
width:400px;
table-layout:fixed;
}
#td01, #td00
{
height:100%;
}
When I am changing the textarea inside cell with row = 0 and col = 0 the cell with row = 1 and col 1 is changing too.
I need fixing size of cells.
This is not perfect, but i think it will do what you want, you have to set an fixed position to the td and a fixed height so i don't know if you'r ok with that for your project.
HTML:
<table>
<tr>
<td id="td00" rowspan="2">
<textarea>A very1 </textarea>
</td>
<td id="td01">
<textarea>A very2 </textarea>
</td>
</tr>
<tr style="position:fixed;">
<!--td>
<textarea>A very3 </textarea>
</td-->
<td >
<textarea>A very4 </textarea>
</td>
</tr>
</table>
CSS:
table, td{
border:1px solid black;
}
table {
height:400px;
width:400px;
table-layout:fixed;
}
#td01
{
height:320px;
}
EXAMPLE: FIDDLE
How can I align the first column to the right and second column to the left and padded 10px with CSS?
<table>
<tbody>
<tr><td align="right">Skype:</td><td align="left"> sent</td></tr>
<tr><td align="right">Tel:</td><td align="left"> +343 343 4343</td></tr>
<tr><td align="right">e-mail:</td><td align="left"> info#example.com</td></tr>
<tr><td></td><td align="left"> example#gmail.com</td></tr>
</tbody>
</table>
You could use the :first-child selector, like this:
td { padding: 10px }
td:first-child { text-align: right }
No aligning is needed in your table anymore.
While this is the easiest, it doesn't work in all browsers (specifically older versions):
/* While :first-child or :first-of-type (equivalent to this) could have been
* used, :nth-of-type(n) is easier to change if you ever decide you want
* different columns to be aligned */
tr td:nth-of-type(1) {
text-align:right;
}
tr td:nth-of-type(2) {
text-align:left;
padding-left:10px;
}
However, by replacing :nth-of-type(1) with .first and :nth-of-type(2) with .second, and adding class="first" and class="second" to the first and second <td> in each row, respectively, you'll get better browser support.
If you're looking to add padding to all cells, simply add:
td {
padding:10px;
}
CSS
table td {
padding: 10px;
}
.alignright {
text-align: right;
}
HTML
<table>
<tbody>
<tr>
<td>Skype:</td>
<td>sent</td>
</tr>
<tr>
<td>Tel:</td>
<td class="alignright">+343 343 4343</td>
</tr>
<tr>
<td>e-mail:</td>
<td class="alignright">info#example.com</td>
</tr>
<tr>
<td colspan="2">example#gmail.com</td>
</tr>
</tbody>
</table>
you mean with an external stylesheet? like this:
HTML
<table>
<tbody>
<tr><td class="right">Skype:</td><td class="left"> sent</td></tr>
<tr><td class="right">Tel:</td><td class="left"> +343 343 4343</td></tr>
<tr><td class="right">e-mail:</td><td class="left"> info#example.com</td></tr>
<tr><td></td><td class="left"> example#gmail.com</td></tr>
</tbody>
</table>
CSS
td {
padding: 10px;
}
td.right {
align: right;
}
td.left {
align: left;
}
I usually style this info in this manner:
<table>
<tbody>
<tr><td class="left">Skype:</td><td class="right"> sent</td></tr>
<tr><td class="left">Tel:</td><td class="right"> +343 343 4343</td></tr>
<tr><td class="left">e-mail:</td><td class="right"> info#example.com</td></tr>
<tr><td class="left"> </td><td class="right padding"> example#gmail.com</td></tr>
</tbody>
</table>
.left {float:left; padding-right:10px; width:50px; text-align:right;}
.right {float:left}
.padding {padding-left:60px;}
http://jsfiddle.net/R9YPF/