I am trying to span background image over 2 table rows but this does not seem to work.
Html:
<table id="branchTable">
<thead>
<th align="center">Tel.</th>
<th align="center">Fax</th>
<td rowspan="2" id="branch-logo"> d</td>
</thead>
<tbody>
<td align="center">${_branch?.tel}</td>
<td align="center">${_branch?.fax}</td>
</tbody>
</table>
css:
#branch-logo {
background-image: url(/public/images/logo.png);
height:53px;
width:100px;
background-repeat: no-repeat;
background-position: left;
}
The image seems to be pushing the row down and not spanning accross.
UPDATE
<table id="branchTable">
<tr id="thead">
<th align="center">Tel.</th>
<th align="center">Fax</th>
<td rowspan="2" id="branch-logo"> d</td>
</tr>
<tr id="tbody">
<td align="center">${_branch?.tel}</td>
<td align="center">${_branch?.fax}</td>
</tr>
</table>
rowspan does not seem to work between tbody and thead. Using tr does the trick.
You forgot your <tr>s in your table. That's probably what causes it to misbehave.
And as Scott says, you use logo in your html and branch-logo in your css.
Edit: In addition, I'm not at all sure if all major browsers support rowspanning a cell over a thead and a tbody. That would take some testing.
Related
I have a table which has a vertical and horizontal title ("Initial Gravity" and "Final Gravity" respectively), I have a hover effect on my elements, but what I would really like is for my hover to intersect in a manner similar to that shown in the image.
I've used red rectangles in the image purely for representation purposes, I'm hoping to use the same hover as is seen on the hovered element, so the result I'm looking to achieve is a purple bar across the row and a purple bar down the column intersecting on the element the user is hovering over.
If code is needed to help get help, please let me know what code you need to see. The table is a monster at 56 rows and 28 cols so not sure if I should add the entire code or just a snippet.
.card-body table{
width:100%;
}
.blank-cell, th{
background: #000;
color: #fff;
}
td {
text-align: center;
}
th{
background: #000;
color: #fff;
}
td:hover {
background: #530288;
color:white;
}
<table>
<thead>
<tr>
<th></th>
<th></th>
<th>
<div><strong>Final Gravity</strong></div>
</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="row-2">
<td class="blank-cell"></td>
<td class="tooltip"></td>
<td class="tooltip">0.990</td>
<td class="tooltip">0.992</td>
<td class="tooltip">0.994</td>
</tr>
<tr class="row-3">
<td class="blank-cell"><strong>Initial Gravity</strong></td>
<td class="tooltip">1.020</td>
<td class="tooltip">3.9</td>
<td class="tooltip">3.7</td>
<td class="tooltip">3.4</td>
</tr>
<tr class="row-4">
<td class="blank-cell"></td>
<td class="tooltip">1.022</td>
<td class="tooltip">4.2</td>
<td class="tooltip">3.9</td>
<td class="tooltip">3.7</td>
</tr>
<tr class="row-5">
<td class="blank-cell"></td>
<td class="tooltip">1.024</td>
<td class="tooltip">4.5</td>
<td class="tooltip">4.2</td>
<td class="tooltip">3.9</td>
</tr>
</tbody>
</table>
I'm trying to create table which looks like below:
I have tried using margin-right property ,and also border spacing ,colspan but not able to achieve it!
Here is my link to codepen:https://codepen.io/saisree/pen/jwwwEZ
<tr >
<td style="padding-top:10px;"colspan="2"class=" fixed text-center">
<span class=" border6 bold pull-left">2210 924-16(267) </span><span class="boxed1"></span></tr>
Any kind of help is highly appreciated.
You need two tds in each tr. In the first 4 rows you apply the attribute colspan="2" to the second td tag, in the rows after that you apply colspan="2" to the first td tag. That's basically all. So actually, there are three TDs in each row, but as each row has a td with a colspan, you only see two in each row.
The width will depend on the contents by default, but you can use width settings for the tds of course. You can not use margins on tds.
table {
border-collapse: collapse;
width: 60%;
margin: 0 auto;
}
td {
border: 1px solid #ddd;
min-width: 35%;
}
td:nth-child(2) {
min-width: 50%;
}
<table>
<tr>
<td>AAA</td>
<td colspan="2" ;>BBB</td>
</tr>
<tr>
<td>AAA</td>
<td colspan="2" ;>BBB</td>
</tr>
<tr>
<td>AAA</td>
<td colspan="2" ;>BBB</td>
</tr>
<tr>
<td>AAA</td>
<td colspan="2" ;>BBB</td>
</tr>
<tr>
<td colspan="2" ;>CCC</td>
<td>DDD</td>
</tr>
<tr>
<td colspan="2" ;>CCC</td>
<td>DDD</td>
</tr>
<tr>
<td colspan="2" ;>CCC</td>
<td>DDD</td>
</tr>
</table>
So I have this code for a table in wordpress.
<table id="intCall" class="tablepress">
<thead>
<tr>
<th style="border: 1px solid;background-color: red;border-color: black;color: white">COUNTRY</th>
<th style="border: 1px solid;background-color: red;border-color: black;color: white">CODE/PREFIX</th>
<th style="border: 1px solid;background-color: red;border-color: black;color: white">RATES</th>
</tr>
</thead>
<tbody class="row-hover">
<tr class="row-1 odd">
<td class="column-1">Afghanistan</td>
<td class="column-2">93</td>
<td class="column-3">$0.4730</td>
</tr>
<tr class="row-2 even">
<td class="column-1">Afghanistan (Mobile A) Roshan</td>
<td class="column-2">9372, 9379</td>
<td class="column-3">$1.0110</td>
</tr>
.......
</tbody>
</table>
2 things are not showing up. The ID, and the thead, however the tr within the thead is showing up within tbody. Not sure whats going on.
Here is a screenshot of the DOM in developer tools.
https://gyazo.com/60bfb1616773de645ff99a53e142b9a7
Here is the site
http://t4.rd-client.com/magicjack/information/international-calling-rates/
Thanks
I found what it was. There was a theme setting to not allow certain tags. Not sure why that exists, but it was there :D
Here's my current fiddle:
http://jsfiddle.net/UjAQf/106/
For the Sport, Status, and Result headings and columns, I want to align center.
For the Pick, Genius, and Genius Credential heading and columns, I want to align left.
For the "picksHeading," I want to align left.
What's the most-efficient way to do this?
--
Code:
<div class="geniusPicks">
<table cellpadding="1" cellspacing="0">
<thead>
<tr id="picksHeading">
<th>Sport</th>
<th>Status</th>
<th colspan="2">Pick</th>
<th>Genius</th>
<th>Genius Credential</th>
<th>Result</th>
</tr>
</thead>
<tbody>
<tr class="bigGap">
<td colspan="7"></td>
</tr>
<tr class="pickHeading">
<td colspan="7">blah</td>
</tr>
<tr class="pickBody">
<td rowspan="4">plah</td>
<td rowspan="4">flah</td>
<td rowspan="4">glah</td>
<td>vlah</td>
<td>mlah</td>
<td>nlah</td>
<td rowspan="4">jlah</td>
</tr>
<tr class="pickBody">
<td>clah</td>
<td>dlah</td>
<td>xlah</td>
</tr>
<tr class="pickBody">
<td>plah</td>
<td>slah</td>
<td>klah</td>
</tr>
<tr class="pickBody">
<td>qlah</td>
<td>wlah</td>
<td>zlah</td>
</tr>
<tr class="smallGap">
<td colspan="7"></td>
</tr>
<tr class="pickHeading">
<td colspan="7">blah</td>
</tr>
<tr class="pickBody">
<td rowspan="4">plah</td>
<td rowspan="4">flah</td>
<td rowspan="4">glah</td>
<td>vlah</td>
<td>mlah</td>
<td>nlah</td>
<td rowspan="4">jlah</td>
</tr>
<tr class="pickBody">
<td>clah</td>
<td>dlah</td>
<td>xlah</td>
</tr>
<tr class="pickBody">
<td>plah</td>
<td>slah</td>
<td>klah</td>
</tr>
<tr class="pickBody">
<td>qlah</td>
<td>wlah</td>
<td>zlah</td>
</tr>
<tr class="smallGap">
<td colspan="7"></td>
</tr>
</tbody>
</table>
</div>
CSS:
.geniusPicks {}
.geniusPicks table {width:100%; font-size:12px;}
.geniusPicks table tr#picksHeading {border:1px solid; background-color:red; height:30px;}
.geniusPicks table tr.pickHeading {border:1px solid;}
.geniusPicks table tr.pickBody td {border:1px solid;}
.bigGap td {height:19px;}
.smallGap td {height:10px;}
you can either add classes to the cells you'd like centered or this might work for you,
Working Example
CSS added:
.geniusPicks table th,
.geniusPicks table th+th+th+th+th+th,
.geniusPicks table .pickHeading+tr td,
.geniusPicks table .pickHeading+tr td+td+td+td+td+td+td {
text-align: center;
}
.geniusPicks table th+th+th,
.geniusPicks table .pickHeading+tr td+td+td {
text-align: left;
}
This CSS makes use of the Adjacent Sibling Selector in two places
.pickHeading+tr - this only targets the cells which come in the row tr which is an immediate sibling of the pickHeading row - which is your 7 celled row, this means the smaller rows the ones with only 3 celss never get targeted and are left to default to the left
td - targets every cell
td+td+td+td+td+td+td - targets every cell which has 6 others preceding it (7)
td+td+td - targets every cell which has 2 others preceding it (3,4,5,6,7)
so the last example in #2 above overrules for cells 3 4 5 & 6, but not 7 as the 2nd example above is more specific
It could probably be done with :nth-child to but this way is supported by IE7, and needs one less rule!
Is there any way to make the header align towards right?
Tested in Internet Explorer 7 only.
<html>
<style type="text/css">
th {
text-align: left;
}
</style>
<body>
<table width="100%" border="1">
<thead>
<tr>
<th style="width: 250px;">Tag
<th style="width: 100px; text-align: right;">Duration
</tr>
</thead>
<tbody>
<tr>
<td > one
<td> two
</tr>
</tbody>
</table>
</body>
</html>
First, close your tags. You have a lot of invalid HTML here. Second, you're mixing the table width (100%) as a percentage and the cell widths (250px, 100px) as pixel widths. These two are not compatible. Choose either one or the other and keep it consistent throughout your table.
<table style="width:350px" border="1">
<thead>
<tr>
<th style="width:250px;">Tag</th>
<th style="width:100px; text-align:right;">Duration</th>
</tr>
</thead>
<tbody>
<tr>
<td>one</td>
<td>two</td>
</tr>
</tbody>
</table>
You aren't closing your TH tags (or your TD tags for that matter). Fix below:
<table width="100%" border="1">
<thead>
<tr>
<th style="width: 250px;">Tag</th>
<th style="width: 100px; text-align: right;">Duration</th>
</tr>
</thead>
<tbody>
<tr>
<td> one </td>
<td> two </td>
</tr>
</tbody>
</table>