Merge several tables together - html

I'm trying to merge tables together by using colspan, but cant seem to create my table. How can i merge tables columns together like following:


The general layout would be:
table,
td {
border: 1px solid #000;
}
table {
width: 50%;
border-collapse: collapse;
}
<table>
<tr>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>


Here is the solution
HTML code is here:
<table width="500" border="1" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
CSS code is here :
table,td {
border-collapse: collapse;
}
JS fiddle Link : http://jsfiddle.net/naveenkumarpg/543c3896/
if you need exact widths for td's you have to use class selector and adjust accordingly

Related

DOMPDF table breaks wrongly

I'm using Laravel DOMPDF Wrapper and I want to print a table on a PDF but when it reaches the bottom of the page, my table breaks, I want the whole to go down but can't find a way to do this.
Table Structure:
<table class="tabla1">
<tr align="center">
<td style="width: 35px;" >Nº</td>
<td>FROM</td>
<td>TO</td>
<td class="hiddebottom">DETAILS</td>
<td style="width: 60px;">COST</td>
</tr>
<tr align="center">
<td class="hiddebottom"></td>
<td>Takami Rodriguez</td>
<td>Sara portan</td>
<td class="ocultar"></td>
<td class="ocultar"></td>
</tr>
<tr align="center">
<td class="ocultar">1</td>
<td class="dir">asdasdasdasdassadasasdasdasd</td>
<td class="dir">asdasddadasdsadadadadadasdasdasd</td>
<td>&bsp;</td>
<td class="ocultar">$23</td>
</tr>
<tr align="center">
<td class="hidetop"></td>
<td> 61569559 </td>
<td> 61569559 </td>
<td></td>
<td class="hidetop"></td>
</tr>
</table>
I'm using:
table tr td{
border: 0.3px solid black;
page-break-inside: avoid !important;
}
Helps please

Try changing your CSS to this.
table {
border: 0.3px solid black;
page-break-inside: avoid !important;
}

HTML <table> cells following a "complete" rowspan not working as expected

I'm trying to make a fairly simple table with a rowspan, and it works as expected. However, the problem is with cells appearing after the all the spanned cells are resolved; they are not positioned where I think they should be.
Here's my code:
<html>
<body>
<table width="100%" border="1">
<tr>
<td rowspan="7">
7 row
</td>
<td>
1 row
</td>
</tr>
<tr>
<td>
1 row
</td>
</tr>
<tr>
<td rowspan="5">
5 row
</td>
</tr>
<tr>
<td>
<i>This shouldn't be here, but below and aligned to the left side of the table</i>
</td>
<td>
<i>This shouldn't be here, but below and aligned at the right side of the table</i>
</td>
</tr>
</table>
</body>
</html>
Here's how it renders in Chrome and Firefox (I don't have the reputation to post inline images at Stack Overflow):
http://embernet.com/misc/rowspan.gif
Those two wordy cells really should be in the columns 1 and 2 that were already established, not as new columns 3 and 4.
The problem seems to come from me spanning rows that are never individually realized. Keep in mind this is part of a larger, dynamically generated table that in some cases will show each of the 7 rows. I know someone will inevitably ask why I need to do this.
I don't see anything in the specs that suggests I cannot rowspan like this, so I'm hoping I'm just missing something obvious.
A JSFiddle is here: https://jsfiddle.net/mLard575/

I am not sure what you are expecting. I give two possibilities as per my understanding.
Choose as per your requirements
First Method:
table {
border-collapse: collapse;
}
td {
padding: 20px;
border: 1px solid black;
text-align: center;
}
<body>
<table>
<tbody>
<tr>
<td rowspan="7">7</td>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td rowspan="5"> 5 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
<td> 1 </td>
</tr>
</tbody>
</table>
</body>
Second Method:
table {
border-collapse: collapse;
}
td {
padding: 20px;
border: 1px solid black;
text-align: center;
}
<body>
<table>
<tbody>
<tr>
<td rowspan="7">7</td>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
<td> 1 </td>
</tr>
</tbody>
</table>
</body>
If these two methods are not suited for you. Just explain little bit more with diagram example to update the code.

How to set width of elements by relative ratio?

For example, I want to set the ratio of width of red:green:blue be 1:2:1 relative to parent, I tried using em, which seems got my desired result:
<table style="width:100%;height:50px;">
<tr>
<td style="height:100%;background-color:red;width:1em;">
</td>
<td style="height:100%;background-color:green;width:2em;">
</td>
<td style="height:100%;background-color:blue;width:1em;">
</td>
</tr>
</table>
but the element doesn't disappear when it has 0em:
<table style="width:100%;height:50px;">
<tr>
<td style="height:100%;background-color:red;width:1em;">
</td>
<td style="height:100%;background-color:green;width:0em;">
</td>
<td style="height:100%;background-color:blue;width:1em;">
</td>
</tr>
</table>
And according to the description of em, it seems unlikely used to define the relative width/height of element.
Is using em the correct way?If not, what is the correct way to achieve this?

Table element has cellspacing and cellpadding. Set cellpadding="0" like following. It will resolve your issue.
<table style="width:100%;height:50px;" cellpadding="0">
<tr>
<td style="height:100%;background-color:red;width:1em;">
</td>
<td style="height:100%;background-color:green;width:0em;">
</td>
<td style="height:100%;background-color:blue;width:1em;">
</td>
</tr>
</table>

This is called "cell-padding" simply give your table cell td a padding: 0;
<table style="width:100%;height:50px;">
<tr>
<td style="height:100%;background-color:red;width:1em;">
</td>
<td style="height:100%;background-color:green;width:0em;padding: 0;">
</td>
<td style="height:100%;background-color:blue;width:1em;">
</td>
</tr>
</table>
EDIT: After reading your post again, what you're searching for is percentage. This will allow you to use a percentage of the parents width.
A 1:2:1 ratio will be 25% : 50% : 25%
<table style="width:100%;height:50px;">
<tr>
<td style="height:100%;background-color:red;width:25%;">
</td>
<td style="height:100%;background-color:green;width:50%;">
</td>
<td style="height:100%;background-color:blue;width:25%;">
</td>
</tr>
</table>

<table style="width:100%;height:50px;border-collapse: collapse;">
<tr>
<td style="height:100%;background-color:red;width:50%;">
</td>
<td style="height:100%;background-color:green;width:0;">
</td>
<td style="height:100%;background-color:blue;width:50%;">
</td>
</tr>
</table>

Instead of em you can use %. check snippet below. Also add cellpadding="0"
<table style="width:100%;height:50px;" cellpadding="0">
<tr>
<td style="height:100%;background-color:red;width:25%;">
</td>
<td style="height:100%;background-color:green;width:50%;">
</td>
<td style="height:100%;background-color:blue;width:25%;">
</td>
</tr>
</table>
or you can go with flexbox
ul {
list-style: none;
display: flex;
padding: 0px;
}
li {
flex-grow:1;
}
li.double {
flex-grow: 2;
}
<ul>
<li style="background-color:red;">1</li>
<li class="double" style="background-color:green;">2</li>
<li style="background-color:blue;">3</li>
</ul>

I would insist not using tables for layout purposes and instead use divs but for your answer
<table style="width:100%;height:50px;">
<tr>
<td style="height:100%;background-color:red;width:50%;">
</td>
<td style="height:100%;background-color:green;width:0;">
</td>
<td style="height:100%;background-color:blue;width:50%;">
</td>
</tr>
</table>

How to select the first occurrence of an HTML element in CSS that does not have a specific class?

I am trying to style a specific element inside a datepicker using CSS. Although I thought that it must be super simple using the nth selectors I can't seem to figure out how it is possible.
I have CSS and HTML code like this:
.ui-datepicker tr td:not(.ui-state-disabled) + td:nth-of-type(1)
{
background-color: red;
}
<table class="ui-datepicker">
<tr>
<td class="ui-state-disabled">
...
</td>
<td class="ui-state-disabled">
...
</td>
<td>
This is the td element I like to select
</td>
<td>
...
</td>
</tr>
</table>
<table class="ui-datepicker">
<tr>
<td class="ui-state-disabled">
...
</td>
<td class="ui-state-disabled">
...
</td>
<td class="ui-state-disabled">
...
</td>
<td class="ui-state-disabled">
...
</td>
<td>
This is the td element I like to select
</td>
<td>
...
</td>
<td>
...
</td>
</tr>
</table>
I would like to select the first td element after the last ui-state-disabled element. The problem is that the position of that td element as well as the number of td elements is not always the same. You can see what I tried in the CSS code of the snippet however it is not working. What I am looking for is a "first occurrence" selector. Is there any way to accomplish this using only CSS?

td.ui-state-disabled + td:not(.ui-state-disabled) {
color: red;
}
<table class="ui-datepicker">
<tr>
<td class="ui-state-disabled">
...
</td>
<td class="ui-state-disabled">
...
</td>
<td>
...
</td>
<td>
...
</td>
</tr>
</table>
<table class="ui-datepicker">
<tr>
<td class="ui-state-disabled">
...
</td>
<td class="ui-state-disabled">
...
</td>
<td class="ui-state-disabled">
...
</td>
<td class="ui-state-disabled">
...
</td>
<td>
...
</td>
<td>
...
</td>
<td>
...
</td>
</tr>
</table>

Creating tables in html

how do i make a table like this?
abc |la
sa |___
cdef|hi
basically the borders like that

If I understood correctly, you want one high cell next to two smaller ones. That can be achieved with the rowspan attribute like this:
<table>
<tr>
<td rowspan="2">abc sa cdef</td>
<td>la</td>
</tr>
<tr>
<td>hi</td>
</tr>
</table>

a quick fix would be the following:
html:
<table>
<tr>
<td class="left">abc</td>
<td class="right1">la</td>
</tr>
<tr>
<td class="left">sa</td>
<td class="right2">&nbps;</td>
</tr>
<tr>
<td class="left">cdef</td>
<td class="right1">hi</td>
</tr>
</table>
css:
td.left { border-right:1px solid black; }
td.right2 { border-bottom:1px solid black; }

<table>
<tr>
<td class="border-r"> abc </td>
<td> la </td>
</tr>
<tr>
<td class="border-r"> sa </td>
<td class="border-b"> </td>
</tr>
<tr>
<td class="border-r">cdef</td>
<td> hi </td>
</tr>
</table>
css
td.border-r
{
border-right:1px solid #000000;
}
td.border-b
{
border-bottom:1px solid #000000;
}

<table>
<tr>
<td class="border-r"> abc </td>
<td> la </td>
</tr>
<tr>
<td class="border-r"> sa </td>
<td class="border-b"> </td>
</tr>
<tr>
<td class="border-r">cdef</td>
<td> hi </td>