Stretch twitter bootstrap table cell across entire table for description - css

I'm trying to format the first row of my table using twitter bootstrap html/css to stretch across all the table headers so that I can use it as a description - like the row with bold font reading "Build Agency Leader Characteristics to Support..." in the image below. When I use td with custom widths, or try to drop text directly into the table row, it doesn't work.

Got it - just had to add attribute colspan=5 to a new table header.

Related

Converting column to sub-row using css only

Im using a table in wordpress site, but I was unable to find its actual php code which is generating that table. So, all I have is table at front end to be edited with only css. I have removed some columns using CSS (can be seen css code on left side of screenshot). What I need is the move the every column cell "More Info" to the beneath under the every row (as indicated by red arrows in screenshot). How CSS can do this? Thanks
Table Link: https://skdstore.com/product/educational-videos-volume-1/
Screenshot Image

I create a table using bootstrap when in the print border the table is missing like not using a table

enter image I created a table using a bootstrap css, but when the table print was lost. How to do when diprint table still has border?
his is the result of the display at the time will be printed. Has no border at all.

BIRT Column Width not being Respected

I'm trying to create a BIRT report. The code and query side of it works just fine, but the display is rather wonky.
There's one column whose text contents are rather long, and instead of showing some text and allowing scrolling of the text (which is the behavior I'd like there), it simply shows up as a very vertically long text block; kinda ruins the report a bit. I've also tried setting the width on the column, but no dice there either. Any ideas?
Also, as an aside, how do I get the table's columns to have grid lines? I can do that on the rows, but I can't seem to figure out how to do that for the columns. If anyone has insight into that issue, it'd be appreciated.
Here's a screenshot of the issue
Here's my BIRT report XML, without headers and footers in order reduce characters
I think there is no way to use a scrollable view element inside your report, because the output by the default html-emitter is completely static (I would like to see a different answer if this should be wrong).
To your second Question about how to add a border to a column. Click into the cell of your table, click on "Border" inside the "Properties Editor" and select the borders you like to use. This should be repreated for all cells where you want to use the borders, because this configuration is not applied for a whole column but just for one cell. If you want a border for the whole column you need to setup the border for every cell in the column.
If you have already a data cell inside your table cell, you can use the outline view to select the table cell instead of the data cell:

mPDF: long text in table td shrinks to small size

I am posting an entire html to mpdfp. It works fine. But when the content in table is more or there is an email address or website name in the column (td) the font size of the text shrinks to unreadable font. What must be the issue? Please help on this. Check the attached image for the issue.
Thanks
As noted in this question: mPDF: Text becomes small when string in table is too long
mPDF automatically reduces font size in tables. There is a maximum shrink factor set in $this->shrink_tables_to_fit variable in config.php. It can be turned off / set differently with
$mpdf->shrink_tables_to_fit=0;
in config.php or with providing an extra parameter to the opening table tag:
<table autosize="1">
Default value for the variable is 1.4.
Also see Tables section of mPDF manual https://mpdf.github.io/tables/tables.html#autosize, especially the infobox Note: mPDF will always resize tables if it is the only way to fit a row or whole table onto a full page.

How to make table cell content visible without extending cell's width?

I would like to achieve effect visible on the screenshot below that is content of the table cell (that blue cell with Michal Aniol...) should be fully visible but cell's width should stay the same.
How do I do that?
I am open for solutions requiring heavy use of javascript as the rest of the application and also table itself will be generated by dojo.
Having colspan > 1 is not an option because it will not work in other cases. I really want to use just single cells as this will help me with other functionality.
Screenshot http://uppix.net/4/d/9/8cfc6aba556405f910871598afa10.png
Markup and css: http://jsfiddle.net/sGkpq/
style.less http://pastebin.com/waXWDf4J
To make my question self-contained in case links die as #Sparky672 pointed:
I wanted to have table cells of same size and if content in a cell is bigger than the cell itself then content should still display and flow to the next cell. So text in a cell if longer than the cell then it should overflow to the next cell overlaying its content.
Just remove overflow-x: hidden from table.reservation-table td. The text will continue past the end of the cell.
Of course, if you want it to work when the name is longer than the cells behind it (eg, Michal only booked one day) that would be more complicated, but probably doable.

Resources