I'm using wkhtmltopdf to generate a pdf from html.
In the html, there is a table with thead and tbody. I use Vue in order to generate the content:
<table class="data-table">
<thead>
<tr>
<th class="title" colspan="5">Control ##{{ index + 1 }}</th>
</tr>
<tr>
<th class="number">#</th>
<th>Tittel:</th>
<th>Kommentar:</th>
<th>Mangelpunkt<br> Registrert:</th>
<th>Mangelpunkt<br> Utbedret:</th>
</tr>
</thead>
<tbody v-for="(checkpoint, cpIndex) in control.checkpoints">
<tr>
<td class="number">#{{ cpIndex + 1}}</td>
<td>#{{ checkpoint.title }}</td>
<td>#{{ checkpoint.comment }}</td>
<td class="danger center">#{{ checkpoint.rejectedDate }}</td>
<td class="success center">#{{ checkpoint.approvedDate }}</td>
</tr>
<tr v-if="checkpoint.images.length > 0">
<td class="number">#{{ cpIndex + 1 }}</td>
<td class="images" colspan="4">
<img v-for="(image, imgIndex) in checkpoint.images" :key="imgIndex" :src="base64Images[image]" alt="print image">
</td>
</tr>
</tbody>
</table>
This works fine in the browser, but if one image is tall enough to not fit on the same page as the other images, it breaks to the next page (as wanted). However, the image is overlapping the thead..
I've tried to apply all sorts of hacks to this the last hours but I simply cannot get the image to respect the thead on the next print page..
Is there anything I'm doing wrong here?
Related
I am trying to create easy HTML table with Vue.js. I would like to add easy Transition, but the animation does not show(it just waits for 2s) and I do not know why?
HTML:
`
<tr >
<td colspan="12">
<table style="background: rgb(188, 5, 131)" class="table table-responsive">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Character ID</th>
<th scope="col">Is alive?</th>
<th scope="col">Years</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr class="child" v-for="child in item.children.has_nemesis.records" :key="child.data.ID">
<td>{{ child.data.ID }}</td>
<td>{{ child.data['Character ID'] }}</td>
<td>{{ child.data['Is alive?'] }}</td>
<td>{{ child.data.Years }}</td>
<td>
<button #click="removeItem(child, item)">
Remove
</button>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</template>
</transition>
`
whole code:https://jsfiddle.net/barabas/vzqLdxkb/2/
I'm using Bootstrap Table to sort some columns. One column has an article title that links to the article itself. I obviously want to be able to sort by title, but it's sorting by the content of the cell as seen in the source code (the link and the title) rather than the visible text (the title.)
<table class="table table-bordered table-striped table-hover table-sortable">
<thead>
<th data-sortable="true">Title</th>
<th>Description</th>
<th data-sortable="true">Posted</th>
</thead>
<tbody>
<tr>
<td data-sortable="true">Article C</td>
<td data-sortable="true">This is description 1</td>
<td data-sortable="true">9/26/2019</td>
</tr>
<tr>
<td data-sortable="true">Article A</td>
<td data-sortable="true">This is description 2</td>
<td data-sortable="true">4/27/2018</td>
</tr>
<tr>
<td data-sortable="true">Article B</td>
<td data-sortable="true">This is description 3</td>
<td data-sortable="true">8/26/2017</td>
</tr>
</tbody>
</table>
In the example it loads as C, A, B. After hitting the sort button I'd expect it to be A, B, C but it sorts as C, B, A (corresponding to 1, 2, 3 in the links.)
Fiddle: https://jsfiddle.net/melisunde/edkz6cv2/11/
Is there a way to have Bootstrap Table ignore the link? This doesn't appear to be addressed in the site's examples. Thanks!
I have a responsive table where the end column shows money figures. Currently it looks like this:
But I want it to do this:
There may not be any data so the £ sign will be replace with N/A which should also be pulled to the right of the column.
The data is fetched from MySQL but here is a simplified snippet of my code:
<table id="mytable" class="table table-bordred table-striped">
<thead>
<th>Reference</th>
<th>Client</th>
<th>Description</th>
<th>Money</th>
</thead>
<tbody>
<tr>
<td>#1234</td>
<td>Josh Blease</td>
<td>Needs a new filter fixing</td>
<td class='money'>
<div class='text-right'>Budget: £123,456</div>
<div class='text-right'>Value: £200,000</div>
<div class='text-right'>Spent: N/A</div>
</td>
</tr>
</tbody>
Divs are useful but Ii don't think that be the best solution for this case maybe you need to use better the table properties
http://www.usabilidad.tv/tutoriales_html/colspan_y_rowspan.asp
<table id="mytable" class="table table-bordred table-striped">
<thead>
<th>Reference</th>
<th>Client</th>
<th>Description</th>
<th colspan="2">Money</th>
</thead>
<tbody>
<tr>
<td rowspan="4">#1234</td>
<td rowspan="4">Josh Blease</td>
<td rowspan="4">Needs a new filter fixing</td>
</tr>
<tr>
<td>Budget</td>
<td>£123,456</td>
</tr>
<tr>
<td>Value</td>
<td>£200,000</td>
</tr>
<tr>
<td>Spent</td>
<td>N/A</td>
</tr>
</tbody>
</table>
<table id="mytable" class="table table-bordred table-striped">
<thead>
<th>Reference</th>
<th>Client</th>
<th>Description</th>
<th>Money</th>
</thead>
<tbody>
<tr>
<td>#1234</td>
<td>Josh Blease</td>
<td>Needs a new filter fixing</td>
<td class='money'>
<div class='text-right'><span>Budget:</span> £123,456</div>
<div class='text-right'><span>Value:</span> £200,000</div>
<div class='text-right'><span>Spent:</span> N/A</div>
</td>
</tr>
</tbody>
and
#mytable tbody tr td .text-right span{
min-width:200px;
max-width:300px;
display: inline-block;
}
Spans need to be set as inline-block otherwise the width properties won't take hold as they are by default inline only elements.
Setting the min and max width will force the span container to not go below or above a certain point, meaning that your other text will be forced to stay to the left of the (example) 200px mark even if your initial text (as in spent) only ends up being (again, example) 80px
I have following table in my site but for some reason the style width:100px does not work for td. Probably some other css is preceding. I have also tried !important but it still doesn't work.
What can I do to get the width to precede all else?
<table>
<tbody>
<tr>
<th>Resurs</th>
<th>Service</th>
<th>Datum</th>
<th>Tid från</th>
<th>Tid till</th>
<th></th>
</tr>
<tr>
<td style="text-align:left">Resource</td>
<td style="width:100px;word-break:break-all">kjslkjfsdjfj sfjlsjfklsljf slfj lsjfs flsj fkljskf lksj fsjf sdlfj lsjföslajfölsjföl afö aölfjas fasöfj </td>
<td>2015-02-22</td>
<td>10.00</td>
<td>11.00</td>
<td>sdfdsf</td>
</tr>
</tbody>
</table>
Does anyone know how I can get the width to work?
Check this jsfiddle
<table>
<tbody>
<tr>
<th>Resurs</th>
<th>Service</th>
<th>Datum</th>
<th>Tid från</th>
<th>Tid till</th>
<th></th>
</tr>
<tr>
<td style="text-align:left">Resource</td>
<td style="width:330px;word-break:break-all">kjslkjfsdjfj sfjlsjfklsljf slfj lsjfs flsj fkljskf lksj fsjf sdlfj lsjföslajfölsjföl afö aölfjas fasöfj </td>
<td>2015-02-22</td>
<td>10.00</td>
<td>11.00</td>
<td>sdfdsf</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/vjka7b5j/
its working properly ,
How do you set the size of a column in a Bootstrap responsive table? I don't want the table to loose its reponsive features. I need it to work in IE8 as well. I have included HTML5SHIV and Respond.
I'm using Bootstrap 3 (3.2.0)
<div class="table-responsive">
<table id="productSizes" class="table">
<thead>
<tr>
<th>Size</th>
<th>Bust</th>
<th>Waist</th>
<th>Hips</th>
</tr>
</thead>
<tbody>
<tr>
<td>6</td>
<td>79 - 81</td>
<td>61 - 63</td>
<td>89 - 91</td>
</tr>
<tr>
<td>8</td>
<td>84 - 86</td>
<td>66 - 68</td>
<td>94 - 96</td>
</tr>
</tbody>
</table>
</div>
Bootstrap 4.0
Be aware of all migration changes from Bootstrap 3 to 4. On the table you now need to enable flex box by adding the class d-flex, and drop the xs to allow bootstrap to automatically detect the viewport.
<div class="container-fluid">
<table id="productSizes" class="table">
<thead>
<tr class="d-flex">
<th class="col-1">Size</th>
<th class="col-3">Bust</th>
<th class="col-3">Waist</th>
<th class="col-5">Hips</th>
</tr>
</thead>
<tbody>
<tr class="d-flex">
<td class="col-1">6</td>
<td class="col-3">79 - 81</td>
<td class="col-3">61 - 63</td>
<td class="col-5">89 - 91</td>
</tr>
<tr class="d-flex">
<td class="col-1">8</td>
<td class="col-3">84 - 86</td>
<td class="col-3">66 - 68</td>
<td class="col-5">94 - 96</td>
</tr>
</tbody>
</table>
bootply
Bootstrap 3.2
Table column width use the same layout as grids do; using col-[viewport]-[size]. Remember the column sizes should total 12; 1 + 3 + 3 + 5 = 12 in this example.
<thead>
<tr>
<th class="col-xs-1">Size</th>
<th class="col-xs-3">Bust</th>
<th class="col-xs-3">Waist</th>
<th class="col-xs-5">Hips</th>
</tr>
</thead>
Remember to set the <th> elements rather than the <td> elements so it sets the whole column. Here is a working BOOTPLY.
Thanks to #Dan for reminding me to always work mobile view (col-xs-*) first.
You could use inline styles and define the width in the <th> tag. Make it so that the sum of the widths = 100%.
<tr>
<th style="width:10%">Size</th>
<th style="width:30%">Bust</th>
<th style="width:50%">Waist</th>
<th style="width:10%">Hips</th>
</tr>
Bootply demo
Typically using inline styles is not ideal, however this does provide flexibility because you can get very specific and granular with exact widths.
you can use the following Bootstrap class with
<tr class="w-25">
</tr>
for more details check the following page
https://getbootstrap.com/docs/4.1/utilities/sizing/