I have a page that displays information from a db in a while loop. Using Bootstrap table and a var $loopcounter that gives each line a separate id. When cliking on a line I am able to expand on the information for each row. This works perfect, thanks to SO and Google.
My problem now is that the table is displaying a double line for the hidden/collapsed row. I have tried several solutions like padding:0 !important, border-color: #FFF, border-color: none, nothing seems to work. Also tried colspan, but that only expands the double line further.
HTML:
<table class="table table-striped table-hover">
<thead>
<th>Name</th>
<th>Age</th>
<th>Adr</th>
</thead>
<tbody>
<?php while ($row = $variable->fetch()) { $loopcounter++ ;?>
<tr data-toggle="collapse" data-target="#row<?php echo $loopcounter; ?>" class="accordion-toggle">
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['age']; ?></td>
<td><?php echo $row['adr']; ?></td>
</tr>
<tr>
<td class="hiddenRow"><div class="accordian-body collapse" id="row<?php echo $loopcounter; ?>">
<table>
<thead><tr><td>Some Header</td></tr></thead>
<tbody><tr><td><?php echo $row['name']; ?></td></tr></tbody>
</table>
</div>
</td>
</tr>
<?php } ?>
</tbody>
</table>
CSS:
.hiddenRow {
padding: 0 !important;
border-color: FFF;
}
IMAGE:
Notice the double border when row is collapsed
It had actually a pretty easy solution, just styled the hidden TD with border:none
Related
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Agent Name</th>
<th>Total number calls audited</th>
<th>Fatal Count</th>
<th>Score</th>
<th>Average</th>
</tr>
</thead>
<!-- <div style="overflow:scroll;min-height:.01%;overflow-y:hidden;overflow-x:scroll;"> -->
<tbody>
<?php
$totalauditded=0;
$totalfatal=0;
$listau=$aucnt->result();
$totalauditded+=$rpostclist->audited;
$totalfatal+=$rpostclist->cnfatal;
?>
<tr>
<td><?php echo $rpostclist->agent_name;?></td>
<td><?php echo $rpostclist->audited;?></td>
<td><?php echo $rpostclist->cnfatal;?></td>
<td>
<table class="table table-bordered">
<tr>
<?php $i=1; foreach($listau as $raucnt) { ?>
<th> Call <?php echo $i;?><br/><?php echo $raucnt->qa_agent;?><br/><?php echo $raucnt->qa_date; ?><br>View</th>
<?php $i++;} ?>
</tr>
<tr>
<?php $sum = 0; foreach($listau as $raucnt) { ?>
<td><?php echo $raucnt->tot;
$sum += $raucnt->tot;?>%</td>
<?php } ?>
</tr>
</table>
</td>
<td style="vertical-align:middle;font-weight:bold;font-size:20px;"><?php echo round($average=$sum/count($listau));?>%</td>
</tr>
<?php } ?>
<tr>
<td></td>
<td style="font-size:16px;"><strong>Total:<?php echo $totalauditded;?></strong></td>
<td style="font-size:16px;"><strong>Total:<?php echo $totalfatal;?></strong></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I googled but didn't find any solutions. What i'am trying is to keep a horizontal bar at the top of the table since it fetches many data from the database its hard to scroll. Maybe both top and bottom horizontal scroll bar is also good for the suggestions.
I changed my container axis to 180 Degree
<div class=" table-responsive"style="transform: rotateX(180deg);">
<table class="table table-striped" style="transform: rotateX(180deg);">```
Use css
overflow-x : auto;
Reference
https://www.w3schools.com/howto/howto_css_menu_horizontal_scroll.asp
<div class="table-responsive">
change to
<div class="table-responsive" style="overflow-y: scroll; overflow-x: auto">
I want the table cells to highlight/change background colour when the mouse hovers over them.
Here is the declaration of the styles
.cells{
border-style:inset;
border-width:1px;
border-color:#06F;
background-color:#D6D6D6;
font-style: italic;
}
.cells td:hover{
background-color: #FF0000;
Here is the creation of the table:
<table class="table">
<tr>
<td></td>
<th colspan="5" class="specialCell">Cost Per Person</td>
</tr>
<tr>
<th class="specialCell">Party Size</th>
<th class="headers"><?php echo $titles[0] ?></th>
<th class="headers"><?php echo $titles[1] ?></th>
<th class="headers"><?php echo $titles[2] ?></th>
<th class="headers"><?php echo $titles[3] ?></th>
<th class="headers"><?php echo $titles[4] ?></th>
</tr>
<?php
for ($y=0; $y<$rows_needed; $y++){
echo '<tr>';
echo '<th class="headers">'.$column1[$y].'</th>';
for ($i=0; $i<5; $i++){
$newValue = $column1[$y] * $titles[$i];
echo '<td class="cells">'.$newValue.'</td>'; //THIS IS WHERE THE CLASS IS CALLED
}
echo '</tr>';
}
?>
</table>
This however does not cause the table cell to change background colour when hovered over. Any ideas?
In your case .cells is the <td>. So your CSS should be:
.cells:hover{
background-color: #FF0000;
}
have you tried to add this style:
.headers:hover{
background-color: #FF0000;
}
Please try this snippet
.headers:hover {
background-color: tomato;
cursor: pointer;
}
<table class="table">
<tr>
<td></td>
<th colspan="5" class="specialCell">Cost Per Person</td>
</tr>
<tr>
<th class="specialCell">Party Size</th>
<th class="headers">A</th>
<th class="headers">B</th>
<th class="headers">C</th>
<th class="headers">D</th>
</tr>
</table>
I am trying to set color when my $key value is changed. I mean I am generating a table when my $key is changing. Now I want to set a different bg-color when the $key is changing and a new table created. Now the <th colspan="5">{{$key}}</th> is changing and creating table for each $key I need to set color that $key is changing.
#foreach($lists as $key => $ser)
<table class="table table-striped table-bordered table-hover" id="sample_3">
<thead>
<tr>
<th colspan="5">{{$key}}</th>
</tr>
<tr>
<th> Destination</th>
<th> Services</th>
<th> Status</th>
<th> Time</th>
</tr>
</thead>
<tbody>
#foreach($ser as $s)
<tr>
<td style="background: rgb(176,224,230);"> TE 17 <br/>{{$s->sp}}</td>
<td> {{$s->dd}}</td>
<td> {{$s->ss}}</td>
<td> {{$s->dt}}</td>
</tr>
#endforeach
</tbody>
</table>
#endforeach
You can use a variable to store the value of $key in each loop. Then you can check to see if the $key is same as the previous one and change the color accordingly.
#php($prevvalue='')
#foreach($ser as $s)
<tr>
<td style="background: {{$s->key == $prevvalue ? 'oldcolor','newcolor'}}"> TE 17 <br/>{{$s->sp}}</td>
<td> {{$s->dd}}</td>
<td> {{$s->ss}}</td>
<td> {{$s->dt}}</td>
</tr>
#php($prevvalue = $s->key)
#endforeach
You can first add class from blade to group elements having similar value :
#php($prev = null)
#php($counter = 1)
#foreach($ser as $s)
#php
$counter = $s->key == $prev || is_null($prev) ? $counter : $counter + 1;
#endphp
<tr>
<td class="td_color_{{ $counter }}"> TE 17 <br/>{{$s->sp}}</td>
<td> {{$s->dd}}</td>
<td> {{$s->ss}}</td>
<td> {{$s->dt}}</td>
</tr>
#php($prev = $s->key)
#endforeach
This will give you following for the first column in each <tr> :
<td class="td_color_1">...</td>
<td class="td_color_1">...</td>
<td class="td_color_2">...</td>
<td class="td_color_2">...</td>
<td class="td_color_3">...</td>
<td class="td_color_4">...</td>
<td class="td_color_5">...</td>
Then in your css you have colors for these :
<style type="text/css">
td.td_color_1 { background: red; }
td.td_color_2 { background: blue; }
td.td_color_3 { background: green; }
td.td_color_4 { background: yellow; }
td.td_color_5 { background: pink; }
</style>
I have a table that has a radio button in on td element, however i am unable to set the width (my page is in HTML5 so using the style css attribute to set the width).
My row is as follows:
<h3><span data-bind="text: description"></span></h3>
<table class="table table-striped table-condensed">
<thead>
<tr>
<th colspan="2">Description</th>
<th>Setup</th>
<th>Monthly</th>
</tr>
</thead>
<tbody>
<!-- ko foreach: options -->
<tr>
<td style="width:16px"><input type="radio" data-bind=" attr: { name: $parent.name }, checkedValue: $data, checked: $parent.selection" /></td>
<td><span data-bind="text: description"></span></td>
<td><span data-bind="text: setup == 0 ? '-' : setup"></span></td>
<td><span data-bind="text: price == 0 ? '-' : price"></span></td>
</tr>
<!-- /ko -->
</tbody>
</table>
In fact all of the rows are 154px wide, each row is equal.
Don't worry about the data-bind attributes, i am using knockoutjs. I am using bootstrap for the stlying, but cant see any column widths applied fron the bootstrap CSS.
I have take a screenshot of chrome below:
Edit and further info
After looking at the fiddle from #daker's comment here http://jsfiddle.net/g18c/Lnvny/, i could see the width was applied OK.
When going over my code, i have a thead section which is causing the issue, this is not present in the above fiddle.
Adding the below thead section to the fiddle stops the widths from applying on the td element, updated here http://jsfiddle.net/g18c/Lnvny/2/
<thead>
<tr>
<th colspan="2">Description</th>
<th>Setup</th>
<th>Monthly</th>
</tr>
</thead>
If i set the width in the th element with <th colspan="2" style="width:20px">Description</th> it sizes, so the td elements are following the width of the td, which makes sense.
However the description spans across 2 columns with colspan="2" which consists of both the first td with radio, and second td with the text description data-bind in the tbody.
Is there any way to keep the th colspan=2 in the thead, yet set the width of the radio button td=16px in tbody?
set width for second column as auto:
http://jsfiddle.net/Lnvny/46/
<h3><span data-bind="text: description"></span></h3>
<table class="table table-striped table-condensed">
<thead>
<tr>
<th colspan="2">Description</th>
<th>Setup</th>
<th>Monthly</th>
</tr>
</thead>
<tbody>
<!-- ko foreach: options -->
<tr>
<td style="width: 15px;"><input type="radio" data-bind=" attr: { name: $parent.name }, checkedValue: $data, checked: $parent.selection" /></td>
<td style="width: auto;">text<span data-bind="text: description"></span></td>
<td style="width: 25%;"><span data-bind="text: setup == 0 ? '-' : setup"></span></td>
<td style="width: 25%;"><span data-bind="text: price == 0 ? '-' : price"></span></td>
</tr>
<!-- /ko -->
</tbody>
</table>
16px+40%+25%+25% is not 100%.
You can't mix px and % this way, the table rendering algorithm can't satisfy such conditions...
As mali303 said, you could set the second td to auto, or even simpler: Don't set its width. The last two colums will be 25% width, the first 16px width and all the remaining space will go for the second column (and 1st td + 2nd td will be 50%)
You could also go the simpler way:
Use 3 columns (50%,25%,25%), remove th colspan, and join the content of your 2 first columns
(both are inline elements):
<td style="width: 50%;">
<input type="radio" data-bind="..." />
<span data-bind="text: description"></span>
</td>
<td style="width:1px"><div style="width:16px"><input type="radio" data-bind=" attr: { name: $parent.name }, checkedValue: $data, checked: $parent.selection" /></div></td>
Add an empty <th></th> in your <thead> section:
http://jsfiddle.net/Lnvny/48/
<table>
<thead>
<tr>
<th colspan="2">Description</th>
<th>Setup</th>
<th>Monthly</th>
<th></th>
</tr>
</thead>
I am designing a site with wordpress. My index page keeps posting news items side by side, and nomatter how I try to modify my code, it will not place a break between the two.
To see what I mean, visit www.acacians.net.
Here is the chunk of code in my template that controls the "News Post" portion of the page:
<table width="760" border="0" align="center" cellpadding="10" cellspacing="0" background="wp-content/themes/DarlingTemplate/images/tablebg.jpg">
<tr>
<td>
<table width="530" border="0" align="left" cellpadding="10" cellspacing="0" bgcolor="#f4f3f0">
<tr><?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<td><table width="530" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="30" height="30"><img src="wp-content/themes/DarlingTemplate/images/category.jpg" /></td>
<td background="wp-content/themes/DarlingTemplate/images/subjbg.jpg"><strong><?php the_title(); ?></strong><br />
Posted on <?php the_time('F jS, Y') ?>
</td>
</tr>
</table>
<table width="530" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="5"></td>
<td width="505"><?php the_content(__('(more...)')); ?>
</tr>
</table>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?><p>
<?php endif; ?>
</td>
</td>
</tr>
</table>
I have tried inserting a break at the end of every line, and then refreshing my page. Why isn't this working?
I appreciate any help that can be offered.
Thank you so much!!!!
it's because you are printing all of the posts into the same tag.
A larger problem though is that you are using nested tables in your layout.