With only Bootstrap css the table width works fine, but with my css styles the td width displays very bad.
<table>
<tbody>
{#items}
<tr onclick="selectPickPoint(this);">
<td width="50" align="center"><input name="pickpointid" type="radio" value="{customer_id}"></td>
<td width="300">
<b>{name}</b> <i style="font-size:9px;">#{customer_id}</i>
<br>
{address} <br> {postal_code} (ver en el mapa)</td>
</tr>
{/items}
</tbody>
</table>
You can check here the rendered example (see chose store table):
https://jsfiddle.net/5ghpqx8L/3/
You seem to have the following css in your fiddle:
.puntosdeventa input, .puntosdeventa select {
width: 235px;
}
This is causing your problem. If you can replace this css with the following line it will work just fine:
.puntosdeventa input, .puntosdeventa select {
width: auto;
}
I would recommend using a different css declaration for the inputs and selects. Most probably you want to have a wider select element than the input.
You can also change these lines to fix it:
Old:
.puntosdeventa input, .puntosdeventa select {
width: 235px;
}
New:
.puntosdeventa input[type='text'], .puntosdeventa select {
width:235px;
}
https://jsfiddle.net/5ghpqx8L/5/
You've set the width of the all inputs (including radio buttons) to be 235px, which is forcing the first column to expand.
Try adding a new style rule, something like:
.puntosdeventa input[type='radio'] { width:auto; }
Related
I am using Angular 7+ and trying to build a scheduling table using HTML table. In this table I have a sticky first column which contains the working days and then to the right I have the the hours of day scrolling horizontal.
The sticky first column has a set width so all the days are showing with equal width. The time columns also have smaller set width.
The issue is the width I set are not working ie it's not being displayed with the required width in the html for time. Instead the hrs are fixed to a very small width.
Can anyone help me fixing this? Ps I don't have to use table whatever works. Thanks in advance
Link to a stackblitz of my issue:
https://stackblitz.com/edit/angular-7-master-z9sdfl?file=src%2Fapp%2Fapp.component.html
Screenshot below:
And finally my code:
TEMPLATE
<div>
<table >
<tr *ngFor="let day of ['MONDAY', 'TUESDAY', 'WEDNESDAY','THURSDAY', 'FRIDAY']">
<td style="width:300px" class="sticky canvas side-panel">{{day}}</td>
<td
style="width:200px"
*ngFor="let col of [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]"
class="time">
{{col}} 00hrs</td>
</tr>
</table>
</div>
CSS
.sticky {
position: -webkit-sticky; /*safari*/
position: sticky;
left:0px;
background-color:#424242;
}
.canvas {
background-color:#424242;
color: white;
}
.time {
color:black;
background-color:white;border-right:1px solid red;border-left:1px solid red;
}
Remove the <div> element inside your <table>, this is the problem. Bind the *ngFor on your <tr> element. Try this.
When using IE11, this file's css takes priority over the inline style. So, please use style in css. I hope it will work
.sticky
{
min-width: 200px;
}
I use following css in my table:
.lh1 {
line-height: 50px;
}
And my table looks like this:
<table class="table table-bordered lh lh1">
..
..
..
</table>
But no matter which value I use for line-height, my table doesn't change at all. Other .css in this table is working fine.
What could be the cause of that problem?
You need to do it like this.
CSS
.lh1 > tbody > tr > td {
line-height: 50px;
}
your CSS is not overwriting the bootstrap CSS. Here is the demo
try with:
.lh1 {
line-height: 50px !important;
}
Your bootstrap may override this
I have a table in html, containing this structured data:
<table>
<tr><td>label1</td><td>value1</td></tr>
<tr><td>label2</td><td>value2</td></tr>
<tr><td>label3</td><td>value3</td></tr>
...
</table>
This is a long list. I would like to be able to but each n+1-th row next to the n th row, like this:
<table>
<tr><td>label1</td><td>value1</td></tr><tr><td>label2</td><td>value2</td></tr>
<tr><td>label3</td><td>value3</td></tr><tr><td>label4</td><td>value4</td></tr>
...
</table>
So the structure stays the same, but the CSS layout would take care of putting each second row on the right, so the users sees 2 columns of (field, value) in one row.
Any hints?
UPDATE:
This trick will do it, but destroys the table-layout, so not usable.
TABLE TR
{
float:left;
}
TABLE TR:nth-child(2n+1)
{
float:left;
clear:both;
}
Try out and let know is that you want?
Your Html
<table>
<tr><td>label1</td><td>value1</td></tr>
<tr><td>label2</td><td>value2</td></tr>
<tr><td>label3</td><td>value3</td></tr>
<tr><td>label4</td><td>value4</td></tr>
<!-- more stuff here -->
</table>
CSS:
tr {
float: left;
}
tr:nth-child(2n+1) {
clear: left;
padding-right: 10px; /* You can edit this line and add as per your style */
}
Works fine in Chrome, Safari, Firefox. Not checked in IE
Example
All,
I have an ASP.NET GridView that is rendered to an HTML table.
<table>
<tr><th>Col 1 Head</th><th>Col 2 Head</th></tr>
<tr><td>Data 1</td><td>Data 2</td></tr>
<tr><td>Data 3</td><td>Data 4</td></tr>
</table>
I want to highlight the row when the mouse is hovered over it - except for the first row which is the header.
I am just getting my head wet with JQuery, and have dabbled a bit with CSS (either CSS2 or CSS3). Is there a preferred way to do this?
Can anyone give me a starting point for this?
Cheers
Andez
There is a way to achieve the desired behavior without class-ing each row separately. Here's how to highlight each table row except for first one (header) on hover using the CSS :not and :first-child selectors:
tr:not(:first-child):hover {
background-color: red;
}
Unfortunately, IE < 9 does not support :not, so to do this in a cross-browser way, you can use something like this:
tr:hover {
background-color: red;
}
tr:first-child:hover {
background-color: white;
}
Basically, the first CSS rule includes all rows. To avoid highlighting the first row, you override the its hover style by selecting with tr:first-child and then keeping its background-color to white (or whatever the non-highlighted row's color is).
I hope that helped, too!
To expand on user2458978's answer surely the best way of doing this is to code up the tables correctly.
<table>
<thead>
<tr><th></th></tr>
</thead>
<tbody>
<tr><td></td></tr>
<tr><td></td></tr>
</tbody>
</table>
Then the CSS is simply
table tbody tr:hover { background-color: red; }
Here's a jsFiddle example
You can do this using the CSS :hover specifier. Here's a demonstration:
<table>
<tr><th>Col 1 Head</th><th>Col 2 Head</th></tr>
<tr class = "notfirst"><td>Data 1</td><td>Data 2</td></tr>
<tr class = "notfirst"><td>Data 3</td><td>Data 4</td></tr>
</table>
CSS:
.notfirst:hover {
background-color: red;
}
1. Place header tr inside thead tag
2. Place other tr inside tbody tag
3. Use following css
table tr:not(thead):hover {
background-color: #B0E2FF;
}
Use TH tag for first row and do that:
th {
background-color:#fff;
}
For all others rows:
tr:not(:first-child):hover {
background-color:#eee;
}
or
tr:hover td {
background-color:#eee;
}
Use jQuery to add a class to the parent element of the td (wont select th)
$('td').hover(function(){
$(this).parent().addClass('highlight');
}, function() {
$(this).parent().removeClass('highlight');
});
Then add the CSS class
.highlight {
background:red;
}
Why not simply use
tr>td:hover {
/* hover effect */
background-color: lightblue;
}
This will only affect table rows with td's inside, not table rows with th's inside.
Works in all browsers. Cheers, guys.
Why not something like:
tr:first-child ~ tr { background-color:#fff; }
As of my requirement, I have to highlight all the even rows except header row.
Hence, this answer might not be suitable to the above question.
Even then, I am giving my answer here with the hope that somebody else can use my answer if they encounter this page in search engine search.
My answer is:
$("#tableName tr:even").not("tr:nth(0)").addClass("highlight");
If your table is standard, you have a table like this:
<table>
<thead>
<tr>
<th>title</th>
</tr>
</thead>
<tbody>
<tr>
<th>cell</th>
</tr>
</tbody>
</table>
so you can use this css code:
table > *:not(thead) tr:hover{
background-color: #f5f5f5;
}
I have a dynamic table in my web page that sometimes contains lots of rows. I know there are page-break-before and page-break-after CSS properties.
Where do I put them in my code in order to force page breaking if needed?
You can use the following:
<style type="text/css">
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
</style>
Refer the W3C's CSS Print Profile specification for details.
And also refer the Salesforce developer forums.
Wherever you want to apply a break, either a table or tr, you needs to give a class for ex. page-break with CSS as mentioned below:
/* class works for table row */
table tr.page-break{
page-break-after:always
}
<tr class="page-break">
/* class works for table */
table.page-break{
page-break-after:always
}
<table class="page-break">
and it will work as you required
Alternatively, you can also have div structure for same:
CSS:
#media all {
.page-break { display: none; }
}
#media print {
.page-break { display: block; page-break-before: always; }
}
Div:
<div class="page-break"></div>
I have looked around for a fix for this. I have a jquery mobile site that has a final print page and it combines dozens of pages. I tried all the fixes above but the only thing I could get to work is this:
<div style="clear:both!important;"/></div>
<div style="page-break-after:always"></div>
<div style="clear:both!important;"/> </div>
Unfortunately the examples above didn't work for me in Chrome.
I came up with the below solution where you can specify the max height in PXs of each page. This will then splits the table into separate tables when the rows equal that height.
$(document).ready(function(){
var MaxHeight = 200;
var RunningHeight = 0;
var PageNo = 1;
$('table.splitForPrint>tbody>tr').each(function () {
if (RunningHeight + $(this).height() > MaxHeight) {
RunningHeight = 0;
PageNo += 1;
}
RunningHeight += $(this).height();
$(this).attr("data-page-no", PageNo);
});
for(i = 1; i <= PageNo; i++){
$('table.splitForPrint').parent().append("<div class='tablePage'><hr /><table id='Table" + i + "'><tbody></tbody></table><hr /></div>");
var rows = $('table tr[data-page-no="' + i + '"]');
$('#Table' + i).find("tbody").append(rows);
}
$('table.splitForPrint').remove();
});
You will also need the below in your stylesheet
div.tablePage {
page-break-inside:avoid; page-break-after:always;
}
this is working for me:
<td>
<div class="avoid">
Cell content.
</div>
</td>
...
<style type="text/css">
.avoid {
page-break-inside: avoid !important;
margin: 4px 0 4px 0; /* to keep the page break from cutting too close to the text in the div */
}
</style>
From this thread: avoid page break inside row of table
When converting to PDF with SelectPdf I couldn't get a group of rows to stay together. Tried to put them in a <div style="break-inside: avoid;"> but that didn't work.
Nothing was working until I found this: https://stackoverflow.com/a/27209406/11747650
Which made me rethink my logic and place the things I didn't want to split inside a <tbody>.
<table>
<thead style="display: table-header-group;">
<tr>
<th></th>
</tr>
</thead>
-- Repeating content --
<tbody style="break-inside: avoid;">
-- First row from group --
<tr>
<td> Only shown once per group </td>
</tr>
-- Repeating rows --
<tr>
<td> Shown multiple times per group </td>
</tr>
</tbody>
This results in a table that has multiple <tbody> but that's something that is completely fine as many people use this exact pattern to group together rows.
If you know about how many you want on a page, you could always do this. It will start a new page after every 20th item.
.row-item:nth-child(20n) {
page-break-after: always;
page-break-inside: avoid;
}
I eventually realised that my bulk content that was overflowing the table and not breaking properly simply didn't even need to be inside a table.
While it's not a technical solution, it solved my problem to simply end the table when I no longer needed a table; then started a new one for the footer.
Hope it helps someone... good luck!
Here is an example:
Via css:
<style>
.my-table {
page-break-before: always;
page-break-after: always;
}
.my-table tr {
page-break-inside: avoid;
}
</style>
or directly on the element:
<table style="page-break-before: always; page-break-after: always;">
<tr style="page-break-inside: avoid;">
..
</tr>
</table>
We tried loads of different solutions mentioned here and elsewhere and nothing worked for us. However we eventually found a solution that worked for us and for us it seems to somehow be an Angular issue. I don't understand why this works, but for us it does and we didn't need any page break css in the end.
#media print {
ng-component {
float: left;
}
}
So just hoping this helps someone else as it took us days to fix.
You should use
<tbody>
<tr>
first page content here
</tr>
<tr>
..
</tr>
</tbody>
<tbody>
next page content...
</tbody>
And CSS:
tbody { display: block; page-break-before: avoid; }
tbody { display: block; page-break-after: always; }