Posts

Showing posts with the label Html Table

Colspan All Columns

Answer : Just use this: colspan="100%" It works on Firefox 3.6, IE 7 and Opera 11! (and I guess on others, I couldn't try) Warning: as mentioned in the comments below this is actually the same as colspan="100" . Hence, this solution will break for tables with css table-layout: fixed , or more than 100 columns. I have IE 7.0, Firefox 3.0 and Chrome 1.0 The colspan="0" attribute in a TD is NOT spanning across all TDs in any of the above browsers . Maybe not recommended as proper markup practice, but if you give a higher colspan value than the total possible no. of columns in other rows , then the TD would span all the columns. This does NOT work when the table-layout CSS property is set to fixed. Once again, this is not the perfect solution but seems to work in the above mentioned 3 browser versions when the table-layout CSS property is automatic . Hope this helps. If you want to make a 'title' cell that spans all columns, as h...

Bootstrap Responsive Table Content Wrapping

Answer : just simply use as below and it will word wrap any long text within a table . No need to anything else <td style="word-wrap: break-word;min-width: 160px;max-width: 160px;">long long comments</td> So you can use the following : td { white-space: normal !important; // To consider whitespace. } If this doesn't work: td { white-space: normal !important; word-wrap: break-word; } table { table-layout: fixed; } I ran across the same issue you did but the above answers did not solve my issue. The only way I was able to resolve it - was to make a class and use specific widths to trigger the wrapping for my specific use case. As an example, I provided a snippet below - but I found you will need to adjust it for the table in question - since I typically use multiple colspans depending on the layout. The reasoning I believe Bootstrap is failing - is because it removes the wrapping constraints to get a full table for the scrollbars. THe...

Bootstrap Table Striped: How Do I Change The Stripe Background Colour?

Answer : Add the following CSS style after loading Bootstrap: .table-striped>tbody>tr:nth-child(odd)>td, .table-striped>tbody>tr:nth-child(odd)>th { background-color: red; // Choose your own color here } .table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th { background-color: red; } change this line in bootstrap.css or you could use (odd) or (even) instead of (2n+1) If you are using Bootstrap 3, you can use Florin's method, or use a custom CSS file. If you use Bootstrap less source instead of processed css files, you can directly change it in bootstrap/less/variables.less . Find something like: //** Background color used for `.table-striped`. @table-bg-accent: #f9f9f9;

Bootstrap-vue B-table With Filter In Header

Answer : You can use the top-row slot to customise your own first-row. See below for a bare-bones example. new Vue({ el: '#app', data: { filters: { id: '', issuedBy: '', issuedTo: '' }, items: [{id:1234,issuedBy:'Operator',issuedTo:'abcd-efgh'},{id:5678,issuedBy:'User',issuedTo:'ijkl-mnop'}] }, computed: { filtered () { const filtered = this.items.filter(item => { return Object.keys(this.filters).every(key => String(item[key]).includes(this.filters[key])) }) return filtered.length > 0 ? filtered : [{ id: '', issuedBy: '', issuedTo: '' }] } } }) <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/><link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-...