unable to change table border radius css - css

I'm trying to change my top left and right border radius on my css but its not doing anything, I have tried targeting the IDs and the table itself and the but nothing is working I'm hoping someone can point out what I'm doing wrong, I'm just not seeing it change at all in my actual html template
heres my code for an example
<table id="flightsContainer">
<tr id="flightsHeader">
<td id="firstTableHeader"><b>FLIGHT INFO</b></td>
<td><b>DEPART</b></td>
<td><b>RETURN</b></td>
<td><b>TRAVELER</b></td>
<td><b>STATUS</b></td>
<td><b>TOTAL</b></td>
</tr>
<tr v-for="flight in pageOfItems" :key="flight.id">
<td>
<section id="flightsAgency">
<div>
<img src="../assets/agency1.png"/>
</div>
<div>
<small>Booking No:</small>
<b><p>{{flight.booknum}}</p></b>
</div>
</section>
</td>
<td>
<section>
<small>{{flight.departDate}}</small>
<b><p>{{flight.departLocation}}</p></b>
</section>
</td>
<td>
<section>
<small>{{flight.returnDate}}</small>
<b><p>{{flight.returnLocation}}</p></b>
</section>
</td>
<td>
<section>
<small>{{flight.travelerType}}</small>
<b><p>{{flight.travelerAge}}</p></b>
</section>
</td>
<td>
<section>
<b><p class="pending" v-bind:class="{ pending: flight.isPending, cancelled: flight.isCancelled, complete: flight.isComplete}">{{flight.status}}</p></b>
</section>
</td>
<td>
<section>
<small>USD</small>
<b><p>{{flight.total}}</p></b>
</section>
</td>
</tr>
</table>
table{
border-top-left-radius: 10px;
}
#flightsHeader{
height: 3em;
border-top-left-radius: 10px;
background-color: #2E9CFE;
color: white;
}

You need to add the following CSS to the first TD in the header.
border: 1px solid #2E9CFE;
border-top-left-radius: 10px;
So it becomes
#flightsHeader{
height: 3em;
background-color: #2E9CFE;
color: white;
}
#firstTableHeader {
border: 1px solid #2E9CFE;
border-top-left-radius: 10px;
}
<table id="flightsContainer">
<tr id="flightsHeader">
<td id="firstTableHeader"><b>FLIGHT INFO</b></td>
<td><b>DEPART</b></td>
<td><b>RETURN</b></td>
<td><b>TRAVELER</b></td>
<td><b>STATUS</b></td>
<td><b>TOTAL</b></td>
</tr>
<tr v-for="flight in pageOfItems" :key="flight.id">
<td>
<section id="flightsAgency">
<div>
<img src="../assets/agency1.png"/>
</div>
<div>
<small>Booking No:</small>
<b><p>{{flight.booknum}}</p></b>
</div>
</section>
</td>
<td>
<section>
<small>{{flight.departDate}}</small>
<b><p>{{flight.departLocation}}</p></b>
</section>
</td>
<td>
<section>
<small>{{flight.returnDate}}</small>
<b><p>{{flight.returnLocation}}</p></b>
</section>
</td>
<td>
<section>
<small>{{flight.travelerType}}</small>
<b><p>{{flight.travelerAge}}</p></b>
</section>
</td>
<td>
<section>
<b><p class="pending" v-bind:class="{ pending: flight.isPending, cancelled: flight.isCancelled, complete: flight.isComplete}">{{flight.status}}</p></b>
</section>
</td>
<td>
<section>
<small>USD</small>
<b><p>{{flight.total}}</p></b>
</section>
</td>
</tr>
</table>

You are missing the border width, style and color. I added an example below.
table { /* this is if you want border radius for the table */
/*border: 1px solid;*/
border-top-left-radius: 10px;
}
#flightsHeader {
height: 3em;
border-top-left-radius: 10px;
background-color: #2E9CFE;
color: white;
}
#flightsHeader td:first-child{/* this is if you want border radius for the first <td> in the header */
border-top-left-radius: 10px;
}
<table id="flightsContainer">
<tr id="flightsHeader">
<td id="firstTableHeader"><b>FLIGHT INFO</b></td>
<td><b>DEPART</b></td>
<td><b>RETURN</b></td>
<td><b>TRAVELER</b></td>
<td><b>STATUS</b></td>
<td><b>TOTAL</b></td>
</tr>
<tr v-for="flight in pageOfItems" :key="flight.id">
<td>
<section id="flightsAgency">
<div>
<img src="../assets/agency1.png" />
</div>
<div>
<small>Booking No:</small>
<b><p>{{flight.booknum}}</p></b>
</div>
</section>
</td>
<td>
<section>
<small>{{flight.departDate}}</small>
<b><p>{{flight.departLocation}}</p></b>
</section>
</td>
<td>
<section>
<small>{{flight.returnDate}}</small>
<b><p>{{flight.returnLocation}}</p></b>
</section>
</td>
<td>
<section>
<small>{{flight.travelerType}}</small>
<b><p>{{flight.travelerAge}}</p></b>
</section>
</td>
<td>
<section>
<b><p class="pending" v-bind:class="{ pending: flight.isPending, cancelled: flight.isCancelled, complete: flight.isComplete}">{{flight.status}}</p></b>
</section>
</td>
<td>
<section>
<small>USD</small>
<b><p>{{flight.total}}</p></b>
</section>
</td>
</tr>
</table>

Related

Auto expand TD according to contained DIV

I have a 3x3 html table. In the second row the first and third column contain div's that are rotated to show content vertically. Other cells show content normally. These vertical divs overflow from TD height. I want to expand TD height dynamically based on Div height(width vertically).
Here is the code from fiddle
UPDATED
HTML
<table>
<tr>
<td>
<div>
?
</div>
</td>
<td>
<div>
<input placeholder="some text">
<button>X</button>
</div>
</td>
<td>
<div>
?
</div>
</td>
</tr>
<tr>
<td class="expand">
<div class="vertical">
<input placeholder="some text">
<button>X</button>
</div>
</td>
<td>
<div>
<input placeholder="some text">
<button>X</button>
</div>
</td>
<td class="expand">
<div class="hw vertical">
<input placeholder="some text">
<button>X</button>
</div>
</td>
</tr>
<tr>
<td>
<div>
?
</div>
</td>
<td>
<div>
<input placeholder="some text">
<button>X</button>
</div>
</td>
<td>
<div>
?
</div>
</td>
</tr>
</table>
CSS
table td {
border: 2px solid lightgray;
}
.hw {
width: 208px !important;
height: 20px;
}
.expand {
white-space: pre;
}
.vertical {
/* writing-mode: vertical-rl; */
transform: rotate(90deg);
}
Thanks in advance.
Use white-space: pre; in td.
edits
check this updated snippet. I used 'writing-mode: tb-rl' to make text vertical.
Check Can I Use for broswer support
table td {
border: 2px solid lightgray;
white-space:nowrap
}
.vertical {
writing-mode: tb-rl;
}
<table>
<tr>
<td>
<div>
?
</div>
</td>
<td>
<div>
lorem ipsum
</div>
</td>
<td>
<div>
?
</div>
</td>
</tr>
<tr>
<td>
<div class="vertical" >
vertical text
</div>
</td>
<td>
<div>
lorem ipsum
</div>
</td>
<td>
<div class="vertical">
vertical text
</div>
</td>
</tr>
<tr>
<td>
<div>
?
</div>
</td>
<td>
<div>
lorem ipsum
</div>
</td>
<td>
<div>
?
</div>
</td>
</tr>
</table>
You can achieve this with jQuery:
var height = $('.vertical').width();
$('.vertical').css({'height':height+'px'});
It takes the width of what the TD would have been if horizontal and applies it to the height instead.
Jsfiddle here

Div Gets 0 Height Instead Of The % Of Its Parent

In the code below, div with red background gets 0 height when the image is there but with image node removed, it gets the correct height of 60px from the parent. Why is it and how can it be corrected?
Here is also the jsfiddle link: https://jsfiddle.net/zuymamq7/
html,body{
width:100%;
height:100%;
}
<table style="width:100%;height:100%;">
<tr style="height:60px;">
<td>
<div style="width:100%; height:100%; background-color:blue;">
<img src="http://www.bensound.com/bensound-img/betterdays.jpg" style="width:60px; height:60px;"></img>
<div style="display:inline-block;width: 10%; height:100%; background-color:red;">
</div>
</div>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
Biggest thing that I noticed as I began to edit this:
You added a close image tag (</img>). Those don't exist. The correct syntax is either <img src="something.jpg"> or more technically <img src="something.jpg" /> Threw off some things a lot (especially in the editor)
I'm thinking this is what you want, or at least, I hope.
html,
body {
width: 100%;
height: 100%;
}
<table style="width:100%;height:100%;">
<tr>
<td style="height:60px">
<div style="width:100%; height:100%; background-color:blue;">
<img src="http://www.bensound.com/bensound-img/betterdays.jpg" style="width:60px; height:60px;" />
<div style="display:inline-block;width: 10%; height:100%; background-color:red;">
</div>
</div>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
Other Way
If you can change up the HTML a bit, then this should work too.
html,
body {
height: 100%;
width: 100%;
}
table {
border-collapse: collapse;
}
<table style="width:100%;height:100%;">
<tr style="background-color:blue">
<td style="height:60px;width:60px;">
<img src="http://www.bensound.com/bensound-img/betterdays.jpg" style="width:60px; height:60px;" />
</td>
<td style="background-color:red; width:10%">
Text
</td>
<td> </td>
</tr>
<tr>
<td>
</td>
</tr>
</table>

custom table td witdh

The problem :
HTML
<div class="visible-sm visible-xs " id="aatablet" style="padding-left: 0px; padding-bottom:10px; padding-top:10px; text-align: center;">
<table border="1">
<tr>
<td colspan="4" class="item_title">
<div style="padding-top:5px;">
Available at:
</div>
</td>
</tr>
<tr>
<td >
<img src="img/amazon-lrg.gif" alt="amazon" />
</td>
<td>
<img src="img/ebay-lrg.gif" alt="ebay" />
</td>
<td >
<img src="img/tomatomill-lrg.gif" alt="tomatomill" />
</td>
<td ><img src="img/BBG-lrg.gif" alt="BBG" />
</td>
</tr>
<tr>
<td >
</td>
<td>
<img src="img/sears-lrg.gif" alt="sears" />
</td>
<td >
<img src="img/healthcraft-home-logo.gif" alt="Healthcraft" title="Healthcraft" />
</td>
<td >
<img src="img/paradisecozycabins.jpg" alt="paradisecozycabins" title="paradisecozycabins" />
</td>
</tr>
</table>
</div>
CSS
#aatablet > table {
margin:0 auto;
}
Framework:bootstrap 3.4.
I want to make td of tomato logo width 100px not 178px like Helt Craft and td of Paradise(last td) 50px not 150px like BIGGAME.
Can someone help me ?I'm not good at making custom tables.Is it possible to do it whit only CSS?
Ty all.
You can give inline:block for td and give separate widths. Target each td using :nth-of-type
td{
display: inline-block;
}
tr:first-child td:nth-of-type(3){
width: 100px;
}
tr:last-child td:nth-of-type(4){
width: 50px;
}

Table Cell 1:1 ratio for height at %-width

I've got a Table with % width and tds with % width. Also table-layout: fixed.
I want the tds height to be 1:1 ratio to %-width.
I can't use td:before {content: ""; display: block; margin-top: 100%;} because that would throw off the positioning of td content and I can't edit the html. So i used it in tr, which leads to the actual problem of the :before being displayed as table cell.
Any ideas on how to fix that or other ways to get the 1:1 ratio?
Here is a fiddle: jsfiddle
And here the internal code snippet, didn't find where to enable SCSS.
table {
width: 100%;
line-height: 31px;
table-layout: fixed;
thead tr: last-child th {
background: blue;
color: white;
&: first-child {
border-top-left-radius: 4px;
}
&:last-child {
border-top-right-radius: 4px;
}
}
tbody {
text-align: center;
td {
width: 14.2857142857%;
position: relative;
box-shadow: inset 1px -1px 0px 0px gray;
&: last-child {
box-shadow: inset 1px -1px 0px 0px gray, inset -1px 0px 0px 0px gray;
}
& .header {
position: absolute;
top: 0.2vw;
left: 0.2vw;
line-height: 11px;
padding: 8px;
font-size: 12px;
}
& .event {
background: blue;
border-radius: 4px;
margin: 35px 4px 4px 4px;
& ~ .event {
margin: 4px;
}
& a:link,
& a:visited,
& a:hover,
& a:active {
color: white;
}
& a:hover {
text-decoration: underline;
}
}
}
.today .header {
color: white;
background: blue;
}
tr {
&: nth-child(odd) .days: nth-child(odd) {
background: gray;
}
&:nth-child(even) .days:nth-child(even) {
background: gray;
}
&:before {
content: "";
display: block;
margin-top: 100%;
}
}
}
}
<table class="calendar">
<thead>
<tr>
<th colspan="2" class="head previous"> </th>
<th colspan="3" class="head current">October 2014</th>
<th colspan="2" class="head next"> </th>
</tr>
<tr>
<th class="label col_first">Mon<span>day</span>
</th>
<th class="label">Tue<span>sday</span>
</th>
<th class="label">Wed<span>nesday</span>
</th>
<th class="label">Thu<span>rsday</span>
</th>
<th class="label">Fri<span>day</span>
</th>
<th class="label weekend">Sat<span>urday</span>
</th>
<th class="label col_last weekend">Sun<span>day</span>
</th>
</tr>
</thead>
<tbody>
<tr class="week_0 first">
<td class="days empty col_first">
<div class="header"> </div>
</td>
<td class="days empty">
<div class="header"> </div>
</td>
<td class="days">
<div class="header">1</div>
</td>
<td class="days">
<div class="header">2</div>
</td>
<td class="days">
<div class="header">3</div>
</td>
<td class="days weekend">
<div class="header">4</div>
</td>
<td class="days weekend col_last">
<div class="header">5</div>
</td>
</tr>
<tr class="week_1">
<td class="days col_first">
<div class="header">6</div>
</td>
<td class="days">
<div class="header">7</div>
</td>
<td class="days">
<div class="header">8</div>
</td>
<td class="days">
<div class="header">9</div>
</td>
<td class="days today">
<div class="header">10</div>
</td>
<td class="days weekend">
<div class="header">11</div>
</td>
<td class="days active weekend col_last">
<div class="header">12</div>
<div class="event cal_1 upcoming"> Rauchen
</div>
<div class="event cal_1 upcoming"> Toilette
</div>
<div class="event cal_1 upcoming"> SpĆ¼len
</div>
<div class="event cal_1 upcoming"> Essen
</div>
<div class="event cal_1 upcoming"> Schlafen
</div>
</td>
</tr>
<tr class="week_2">
<td class="days col_first">
<div class="header">13</div>
</td>
<td class="days">
<div class="header">14</div>
</td>
<td class="days">
<div class="header">15</div>
</td>
<td class="days">
<div class="header">16</div>
</td>
<td class="days">
<div class="header">17</div>
</td>
<td class="days weekend">
<div class="header">18</div>
</td>
<td class="days weekend col_last">
<div class="header">19</div>
</td>
</tr>
<tr class="week_3">
<td class="days col_first">
<div class="header">20</div>
</td>
<td class="days">
<div class="header">21</div>
</td>
<td class="days">
<div class="header">22</div>
</td>
<td class="days">
<div class="header">23</div>
</td>
<td class="days">
<div class="header">24</div>
</td>
<td class="days weekend">
<div class="header">25</div>
</td>
<td class="days weekend col_last">
<div class="header">26</div>
</td>
</tr>
<tr class="week_4 last">
<td class="days col_first">
<div class="header">27</div>
</td>
<td class="days">
<div class="header">28</div>
</td>
<td class="days">
<div class="header">29</div>
</td>
<td class="days">
<div class="header">30</div>
</td>
<td class="days">
<div class="header">31</div>
</td>
<td class="days empty weekend">
<div class="header"> </div>
</td>
<td class="days empty weekend col_last">
<div class="header"> </div>
</td>
</tr>
</tbody>
</table>
Ok I did it like this now:jsfiddle
Put the before in the td and just gave the first .event -80% margin top.
& .event {
margin: -80% 4px 4px 4px;
td:before {
content: "";
display: block;
margin-top: 100%;
}

Inner divs to expand the outer div with scroll horizontally

How to make the child divs to display all in one line inside outer div and not fall to second line?
The outer div width should be fixed so the scrollbar should be visible so we can scroll to see all inner divs.
http://jsfiddle.net/pkbkY/
<style type="text/css">
.child
{
width: 100px;
float: left;
}
</style>
<div style="width: 500px; overflow: scroll;">
<div class="child">
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</div>
<div class="child">
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</div>
<div class="child">
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</div>
<div class="child">
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</div>
<div class="child">
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</div>
<div class="child">
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</div>
</div>
Here you go: http://jsfiddle.net/thirtydot/pkbkY/1/
#scroll_container {
width: 500px;
overflow: scroll;
white-space: nowrap;
}
.child {
width: 100px;
display: inline-block;
border: 1px solid red;
}
If you need the gaps to be gone, the easiest solution is to remove the whitespace between the child elements: http://jsfiddle.net/thirtydot/pkbkY/2/

Resources