I am just trying out a simple table format but it's been giving me headache
The table has a fixed height, and the items is supposed to be aligned to the top. With empty spaces below if there is excess space.
Current Code
<table width='100%' height='250px' style='font-family: Arial, Helvetica, sans-serif; font-size: 10pt; border: 1.0pt solid windowtext; vertical-align: top;'>
<tr style='border-bottom: 1.0pt solid windowtext;'>
<td><b><u>Sim Card :</u></b></td>
</tr>
<tr>
<td><b>Phone Number</b></td>
<td><b>4G</b></td>
</tr>
<tr>
<td>55555555</td>
<td>YES</td>
</tr>
<tr>
<td>66666666</td>
<td>YES</td>
</tr>
<tr>
<td>77777777</td>
<td>NO</td>
</tr>
</table>
EDIT:
I think i wasn't clear with what I want earlier, what I want is not just for the TD to valign top, its for the whole cell to be valigned to the top of the table without each of them having the average height of the table.
This looks exactly like you want in your second picture:
<div style='width: 100%; height: 250px; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; border: 1.0pt solid windowtext;'>
<table width='100%'>
<tr style='border-bottom: 1.0pt solid windowtext;'>
<td><b><u>Sim Card:</u></b></td>
</tr>
<tr>
<td><b>Phone Number</b></td>
<td><b>4G</b></td>
</tr>
<tr>
<td>55555555</td>
<td>YES</td>
</tr>
<tr>
<td>66666666</td>
<td>YES</td>
</tr>
<tr>
<td>77777777</td>
<td>NO</td>
</tr>
</table>
</div>
https://jsfiddle.net/83drLumk/2/
You may as well reset tr display unless you have some colspan involved wich might need tuning to be done.
tr{
display:table;
width:100%;
table-layout:fixed;
}
<table width='100%' height='250px' style='font-family: Arial, Helvetica, sans-serif; font-size: 10pt; border: 1.0pt solid windowtext; vertical-align: top;'>
<tr style='border-bottom: 1.0pt solid windowtext;'>
<td><b><u>Sim Card :</u></b></td>
</tr>
<tr>
<td><b>Phone Number</b></td>
<td><b>4G</b></td>
</tr>
<tr>
<td>55555555</td>
<td>YES</td>
</tr>
<tr>
<td>66666666</td>
<td>YES</td>
</tr>
<tr>
<td>77777777</td>
<td>NO</td>
</tr>
<tr><td style="text-align:center; background:#eee">add more content and rows to let that table grow itself once bottom reached</td></tr>
</table>
Since answer is already given, mind it as an alternative
another answers says: add empty elements, wich actually is a good tip too, but via :after it wouldn't bother the markup.
tr {
height:1%;
}
table:after {
content:'';
display:table-row;
}
<table width='100%' height='250px' style='font-family: Arial, Helvetica, sans-serif; font-size: 10pt; border: 1.0pt solid windowtext; vertical-align: top;'>
<tr style='border-bottom: 1.0pt solid windowtext;'>
<td><b><u>Sim Card :</u></b></td>
</tr>
<tr>
<td><b>Phone Number</b></td>
<td><b>4G</b></td>
</tr>
<tr>
<td>55555555</td>
<td>YES</td>
</tr>
<tr>
<td>66666666</td>
<td>YES</td>
</tr>
<tr>
<td>77777777</td>
<td>NO</td>
</tr>
</table>
You need to apply vertical align value to the <td> element
td {
vertical-align: top;
}
Also noticed you should add colspan on the only <td>, in first <tr>
<td colspan="2" style='vertical-align: top;'>
<b><u>Sim Card :</u></b>
</td>
Edit:
Just saw you updated question. You can just create some empty cell and add them before the end of the table. Also remove the height value on the table.
<tr>
<td colspan="2">
</td>
</tr>
Updated demo http://jsfiddle.net/q8e78cL0/
Edit 2:
#GCyrillus also pointed out a better way by using pseudo element to create the blank space, so no need to touch the markup.
table:after {
content: '';
display: table-row;
height: 100px;
}
Demo here http://jsfiddle.net/q8e78cL0/2/
The vertical-align CSS property in not inherited by default. Apply the vertical-align: top property to the td elements directly.
Here is the correct way
<table width='100%' height='250px' style='font-family: Arial, Helvetica, sans-serif; font-size: 10pt; border: 1.0pt solid windowtext; vertical-align: top;'>
<tr style='border-bottom: 1.0pt solid windowtext;'>
<td><b><u>Sim Card :</u></b></td>
</tr>
<tr>
<td><b>Phone Number</b></td>
<td><b>4G</b></td>
</tr>
<tr>
<td>55555555</td>
<td>YES</td>
</tr>
<tr>
<td>66666666</td>
<td>YES</td>
</tr>
<tr>
<td>77777777</td>
<td>NO</td>
</tr>
</table>
And here is a working demo fiddle for you. Just copy and paste the demo css and html
https://jsfiddle.net/wgrLfxg3/13/
I can't comment yet so I'll have to do it this way.
You're giving your table a fixed height, which is exactly what causes the thing you want to remove. The auto calculated height of your rows. If I were you I would remove that table height and put a div around the table with a fixed height to give you the border you want.
td {
vertical-align: top;
line-height: 2.0 !important
}
Related
I need to wrap text within a <td> element, but I can't use the css table-layout property as the output is to html e-mail body and Outlook doesn't support the table-layout property.
Is there some other way to wrap text within a <td> element, or do I need to do the line breaking and measuring manually in code?
Here is an example of what I am trying to acheive:
td {
border: solid black 1pt;
font-family: arial;
font-size: 10pt
}
thead td{
text-align:center;
font-weight:bold;
}
table {
border-collapse: collapse
}
<html>
<body>
<table style="width:35pt;height:24pt;table-layout:fixed">
<thead>
<tr>
<td style="width:35pt;height:12pt">Good</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width:35pt;height:12pt;word-wrap:break-word">Costingly Cost Cost</td>
</tr>
</tbody>
</table>
<div style="height:50pt"></div>
<table style="width:35pt;height:24pt;">
<thead>
<tr>
<td style="width:35pt;height:12pt">Bad</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width:35pt;height:12pt" nowrap>Costingly Cost Cost</td>
</tr>
</tbody>
</table>
</body>
</html>
Use the Microsoft proprietary word-break:break-all;
<td style="word-break:break-all;">
That should fix things.
You can try this:
<tr>
<td nowrap>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
<td>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
The table is in the image attached below.
Can anyone help me out with the html and css to create this? I have been trying for about an hour or two. I cant get a separate border around each table. as well as the spacing. Pretty much everything I'm having trouble with, I don't know CSS yet but my lecturer asked us to try it out.
Tables I'm having trouble with
td { "background-color: #D3D3D3;
}
table {
border:1 px; solid #D3D3D3;
}
<table>
<tr>
<td> Short title: </td>
<td> Data Driven Apps I </td>
</tr>
</table>
You can achieve the styling with border-spacing and border-collapse and join columns with colspan
demo: http://codepen.io/anon/pen/ZBEZNb
css:
table {
border-spacing:0 10px;
border-collapse:separate;
}
td {
padding:2px 10px;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
}
td.gray {
background:#ddd
}
td:last-child {
border-right:1px solid #ddd;
}
html:
<table>
<tr>
<td class="gray">Short Title</td>
<td colspan="2">Data Driven Apps 1</td>
<td colspan="3"></td>
</tr>
<tr>
<td class="gray">Full Title</td>
<td colspan="2">Data Driven Apps 1</td>
<td colspan="3"></td>
</tr>
<tr>
<td class="gray">Attendance</td>
<td>N/A</td>
<td></td>
<td class="gray">Discipline</td>
<td colspan="2">Databases</td>
</tr>
<tr>
<td class="gray">Coordinator</td>
<td>Gerry</td>
<td></td>
<td class="gray">Department</td>
<td colspan="2">Information Technology</td>
</tr>
<tr>
<td class="gray">Official Code</td>
<td>GATB</td>
<td class="gray">NFQ Level</td>
<td>08</td>
<td class="gray">ECTS Credit</td>
<td>05</td>
</tr>
</table>
I am trying to design the following table using html and css how do I proceed with it. Thank you in advance.
This solution will save you from having to use nested tables. The trick is that you really have four rows, not three, and make use of colspan and rowspan.
Note that you need to set a height for the td in order to ensure they are even.
table {
width: 100%;
border-collapse: collapse;
}
td {
border: 1px solid black;
height: 30px;
}
<table>
<tr>
<td colspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
you can try this one:
HTML
<table>
<tr>
<td>
<table>
<tr>
<td colspan="2">Th</td>
</tr>
<tr>
<td>Th</td>
<td>Th</td>
</tr>
<tr>
<td>Th</td>
<td>Th</td>
</tr>
</table>
</td>
<td>Th</td>
</tr>
</table>
CSS
table
{
width:100%;
height:100px;
text-align:center;
border:2px solid gray;
border-collapse: collapse;
}
td
{
border:2px solid gray;
}
.container
{
width:100%;
}
.container .header
{
width:100%;
height:200px;
background:#5076BB;
}
.container .slider
{
width:100%;
height:500px;
background:#5076BB;
}
DEMO HERE
UPDATED DEMO HERE
Read the tutorial: http://www.w3schools.com/html/html_tables.asp
In particular read the part about the attributes rowspan="" and colspan=""
Example:
<td colspan="2">This table data will span two columns</td>
<td rowspan="2">This table data will span two rows</td>
I dont know if this is possible but...I am trying to format a table with css, to have a specific look. This is for a wordpress site that will be updated by my client. The problem is that she is going to be copying/pasting tables with a specific format, and i want the table to have that format without her doing any extra work.
This is what i have so far.
I want the cells with the Bold text to not have a dotted line bellow them.
Right now i am formating the tr lines to add the dotted lines like this:
html
<table class="dotted" border="0" width="450" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="2"><strong>Argento</strong></td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td colspan="2"><strong>Bellini</strong></td>
</tr>
.....
css
.dotted tr:nth-child(even) {
text-decoration: none;
border-bottom: 1px white dotted;
}
.dotted tr:nth-child(odd) {
text-decoration: none;
border-bottom: 1px white dotted;
}
Is there a way i can do this without having to add a custom class tag for each that has the bold text in it ?
This is how i want it to look like, but this is all done manually...That's what i am trying to avoid.
ps: Sometimes the tables might have more than 1 'data' under the bold letters so its not always odd, even lines, when it comes to the 'title' and the 'plays' bellow them. (this is a site for musical plays)
-Thanks
#Manoj Kumar Yeah the bold items are always under colspan 2
Since you stated the above comment, I have a CSS hack for it.
Change your CSS to have dotted border only on td instead of tr elements.
Target the elements with colspan=2 with attribute selector to have no border.
table {
background: gray;
}
.dotted td:nth-child(even) {
text-decoration: none;
border-bottom: 1px white dotted;
}
.dotted td:nth-child(odd) {
text-decoration: none;
border-bottom: 1px white dotted;
}
.dotted td[colspan="2"] { /* Attribute selector */
border: 0 none;
}
<table class="dotted" border="0" width="450" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="2"><strong>Argento</strong>
</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td colspan="2"><strong>Bellini</strong>
</td>
</tr>
<tr>
<td colspan="2"><strong>Argento</strong>
</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td colspan="2"><strong>Bellini</strong>
</td>
</tr>
<tr>
<td colspan="2"><strong>Argento</strong>
</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td colspan="2"><strong>Bellini</strong>
</td>
</tr>
<tr>
<td colspan="2"><strong>Argento</strong>
</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td colspan="2"><strong>Bellini</strong>
</td>
</tr>
</tbody>
</table>
I have a table with rowspan in first cells of row. I want to select first cells. When I select first child, in some rows after rowspan, first child going to be cells that are not in first row.
How to select just first column of table?
Here is my JSFIDDLE http://jsfiddle.net/qw78pcud/
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
table{
font-size: 18px;
color: black;
}
table tr td:first-child{
color: red;
text-align: center;
}
<table>
<thead>
<tr>
<th>Country</th>
<th>Bank Name</th>
<th>SWIFT BIG</th>
<th>Currency</th>
</tr>
</thead>
<tbody>
<tr>
<td>USA</td>
<td>Deutsche Bank Trust Company Americas, New Your</td>
<td>BKTRUS33</td>
<td>USD</td>
</tr>
<tr>
<td>Germany</td>
<td>Deutsche Bank AG</td>
<td>DEUTDEFF</td>
<td>EUR</td>
</tr>
<tr>
<td rowspan="2">Austria</td>
<td rowspan="2">Raiffeisen Bank International AG</td>
<td rowspan="2">RZBAATWW</td>
<td>EUR</td>
</tr>
<tr><td>USD</td></tr>
<tr>
<td rowspan="5">Netherlands</td>
<td rowspan="5">Demir - Halk Bank (Nederland) N.V.</td>
<td rowspan="5">DHBNNL2R</td>
<td >EUR</td>
</tr>
<tr><td>USD</td></tr>
<tr><td>GBP</td></tr>
<tr><td>CHF</td></tr>
<tr><td>JPY</td></tr>
</tbody>
</table>
I used following selector but it selects last childs after rowspan as jsfiddle shows
table tr td:first-child{
color: red;
text-align: center;
}
Note: I can't set class or id to table elements. I need to access with css.
Edit: What can we do in This case? http://jsfiddle.net/qw78pcud/6
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
table{
font-size: 18px;
color: black;
}
table tr td:first-child:not(:only-child) {
color: red;
text-align: center;
}
<table>
<thead>
<tr>
<th>Country</th>
<th>Bank Name</th>
<th>SWIFT BIG</th>
<th>Currency</th>
</tr>
</thead>
<tbody>
<tr>
<td>USA</td>
<td>Deutsche Bank Trust Company Americas, New Your</td>
<td>BKTRUS33</td>
<td>USD</td>
</tr>
<tr>
<td>Germany</td>
<td>Deutsche Bank AG</td>
<td>DEUTDEFF</td>
<td>EUR</td>
</tr>
<tr>
<td rowspan="2">Austria</td>
<td rowspan="2">Raiffeisen Bank International AG</td>
<td rowspan="2">RZBAATWW</td>
<td>EUR</td>
</tr>
<tr><td>USD</td></tr>
<tr>
<td rowspan="5">Netherlands</td>
<td rowspan="5">Demir - Halk Bank (Nederland) N.V.</td>
<td rowspan="5">DHBNNL2R</td>
<td >EUR</td>
</tr>
<tr><td>USD</td></tr>
<tr><td>GBP</td></tr>
<tr><td>CHF</td></tr>
<tr><td>JPY</td></tr>
<tr>
<td rowspan="10">Russia</td>
<td rowspan="3">CB “Garanti Bank – Moscow” (ZAO)</td>
<td rowspan="3">GABMRUMM</td>
<td >EUR</td>
</tr>
<tr><td>USD</td></tr>
<tr><td>RUB</td></tr>
<tr>
<td rowspan="2">Sberbank of Russia </td>
<td rowspan="2">SABRRUMM</td>
<td>USD</td>
</tr>
<tr><td>RUB</td></tr>
<tr>
<td rowspan="3">JSCB “Yapi Kredi Bank Moscow" (CJSC)</td>
<td rowspan="3">YKBMRUMM</td>
<td>EUR</td>
</tr>
<tr><td>USD</td></tr>
<tr><td>RUB</td></tr>
<tr>
<td rowspan="2">ZAO Raiffeisenbank </td>
<td rowspan="2">RZBMRUMM</td>
<td>USD</td>
</tr>
<tr><td>RUB</td></tr>
</tbody>
</table>
You could achieve that by using a combination of :not() and :only-child pseudo-classes as follows:
Example Here
table tr td:first-child:not(:only-child) {
color: red;
text-align: center;
}
This would exclude the cells that are the only child of their parents - the rows.