Following is the code structure of my HTML table. I insert a large image in tr class c0 (marked by *...*). The class no-overflow has overflow:auto. In other pages, using the same class no-overflow there are horizontal and vertical scroll bars if the image gets big. However, in this particular case, the bars do not appear.
<table class="someclass" width="60%">
<thead>
<tr>
<th class="header c0" style="text-align:left;">Content: Test 1</th>
<th class="header c1">Class Statistics</th>
</tr>
</thead>
<tbody>
**<tr class="r0">
<td class="cell c0" style="text-align:left;">Question: <br>
<div class="no-overflow">
<div class="no-overflow">
<p><img src="image path" width="1365" height="767"></p>
</div>
</div>
</td>
<td class="cell c1" style=""> </td>
</tr>**
<tr class="r1">
<td class="cell c0" style="text-align:left;">Answer:</td>
<td class="cell c1" style=""> </td>
</tr>
<tr class="r0">
<td class="cell c0" style="text-align:left;"><input type="button" name="1" value="Next"> Next </td>
<td class="cell c1" style=""></td>
</tr>
<tr class="r1 lastrow">
<td class="cell c0" style="text-align:left;"></td>
<td class="cell c1" style=""> </td>
</tr>
</tbody>
</table>
Table Image:
overflow:auto by itself on a table-cell isn't going to do anything, unfortunately. Table cells will resize themselves to allow them to fit their contents. However, if you add a fixed width and height to the table cell, the overflow works fine and the scroll bars are visible.
See this fiddle.
Related
I'm using DOMPDF to convert HTML to PDF but whenever a page break occurs and rowspan is used then the table is broken. I fixed it by removing the rowspan and removing the border (border-bottom: none). Furthermore tds are inserted.
It looks like this:
<table>
<tr>
<th>Test 1</th>
<th>Test 2</th>
</tr>
<tr>
<td style="border-bottom:none">Hello, world!</td>
<td>Test 3</td>
</tr>
<tr>
<td style="border-bottom:none;border-top:none;"></td>
<td>Test 3</td>
</tr>
<tr>
<td style="border-top:none"></td>
<td>Test 3</td>
</tr>
</table>
Now I want to vertically align "Hello, world!" to the center relative to the 3 tds.
How can I do this?
<div>
<div style="display:flex;">
<div style="width:200px;">
Test 1
</div>
<div style="width:200px;">
Test 2
</div>
</div>
<div style="display:table;">
<div style="width: 200px;display: table-cell;vertical-align: middle;">
Hello World
</div>
<div style="width:200px;">
<div>
Test 3
</div>
<div>
Test 3
</div>
<div>
Test 3
</div>
</div>
</div>
</div>
If you want to achieved in DOMPDF then div will help (you have to used inline css )
use for align it to the middle
<td align="center"></td>
This webapge I'm working on looks like this:
The HTML is loosely like this:
<div class="title">
<table>
<tr>
<td width="35%">Table 1a Header</td>
<td width="65%">Table 2a Header</td>
</tr>
</table>
</div>
<div class="padding-all">
<div class="body" style="width: 100%">
<div><table> <!-- table 1b... --></div>
<div><table> <!-- empty table for spacing --></div>
<div><table> <!-- table 2b... --></div>
</div>
</div>
What I would like to achieve is either:
1) Have the text in my <div class="title"> at the top align above the tables inside of my <div class="body">
OR
2) Have the "top" rows inside of the tables span the entire width of the page, so that there is no black whitespace, in essence making it appear similar to how the current title div appears.
Either way, I need the text for "1a" to align with "1b" and the same for 2a/2b. As well as have it with a gray background that spans the width of the page.
I'm much more of a developer than I am a designer and I cannot seem to figure out how I can get this to work. I've fudged around with the percentages for the title div's table data cells, but this only works on certain resolutions, otherwise it doesn't display correctly. What else can I do?
Depending on what you're trying to accomplish as a whole, one option is to embed your tables.
See my example in this jsfiddle where I've used the following code:
<table>
<thead>
<tr>
<th width="2%"></th>
<th width="33%">Table 1a Header</th>
<th width="2%"></th>
<th width="63%">Table 2a Header</th>
</tr>
<tr height="10px">
<td colspan="4"></td>
</tr>
<tr>
<td width="2%"></td>
<th width="33%">Table1b Header</th>
<td width="2%"></td>
<th width="63%">Table2b Header</th>
</tr>
</thead>
<tbody>
<tr>
<td width="2%"></td>
<td width="33%">
<table><!-- Content --></table>
</td>
<td width="2%"></td>
<td width="63%">
<table><!-- Content --></table>
</td>
</tr>
</tbody>
</table>
I'm trying to set up my website with an image, then under that image there will be two SVG files and two Bootstrap-style grids each containing one table of information. However, Bootstrap seems to be making them orient vertically instead of horizontally. You can see the end result here if you scroll to the bottom. As you'll see, the Population by Gender and Household and Family tables are one after another vertically instead of horizontally, as I want them to be. Please do note before voting to close this for duplicate that there are other problems similar to this one, but I've tried the solutions in them and they didn't work.
I've included code of the relevant portion of the HTML, it's a bit of a mess but as you can see the <div class="col-xl-6"> tags that Bootstrap uses are around the two tables, yet they still show up vertically. How come?
<div class="container-fluid">
<svg>HUGE SVG LINK REMOVED</svg>
<svg>2ND HUGE SVG LINK REMOVED</svg>
<div class="row">
<div class="col-xl-6">
<h3>Population by Gender</h3>
<div>Male: 627 (44.91%, )</div>
<div>Females: 769 (55.09%, )</div>
<br>
<table cellpadding="0">
<tr>
<td align="center">Block Group 970500-1</td>
<td>
<div>Male: 44.91%</div>
<div> Female: 55.09%</div>
</td>
</tr>
<tr>
<td align="center">New York</td>
<td>
<div id="pt" >Male: 48.39%</div>
Female: 51.61%
</td>
</tr>
<tr></tr>
</table>
<p class="small">*Based on 2010 data.</p>
</div>
<div class="col-xl-6">
<a name="HouseholdandFamily"></a>
<h3>Household and Family</h3>
<table class="tbb tbright" cellpadding="20">
<tr bgcolor="#eeeeee">
<td> </td>
<td><b>Block Group 970500-1</b></td>
</tr>
<tr>
<td>Total Households</td>
<td>548</td>
</tr>
<tr bgcolor="#eeeeee">
<td>Average Household Size</td>
<td>2.31,</td>
</tr>
<tr>
<td>1 Person Households</td>
<td>185, 33.76%, </td>
</tr>
<tr bgcolor="#eeeeee">
<td>2 or More Person Households</td>
<td>363, 66.24%, </td>
</tr>
<tr>
<td>Family Households (Families)</td>
<td>321, 58.58%, </td>
</tr>
<tr bgcolor="#eeeeee">
<td>Average Family Size</td>
<td>2.98, </td>
</tr>
<tr>
<td>Married-Couple Family</td>
<td>221, 40.33%, </td>
</tr>
<tr bgcolor="#eeeeee">
<td>Nonfamily Households</td>
<td>227, 41.42%, </td>
</tr>
</table>
</div>
</div>
You're using <div class="col-xl-6">, that means this div would take 6 columns on extra large displays, but it will take full width on anything smaller.
So, you probably need to use something smaller like this:
<div class="col-md-6"></div>
or
<div class="col-lg-6"></div>
For 'Population by Gender' box: move <table> into <div> element.
For each of div element set class col-xs-6 col-md-6.
Here you can find examples: http://getbootstrap.com/examples/grid/
i have a problem by open an html table to word.
I have a complex designed table, with table into tables-cells and so on. And now I need this table with the cell background-colors and the given borders in MS-Word.
<table class="tablebox">
<tr class="head">
<td class="cell10">Icon</td>
<td class="cell10">Status</td>
<td class="cell50">
<table class="group">
<tr class="colGroup">
<td>
<table class="box yellow">
<tr class="color">
<td class="leftbox"></td>
<td class="rightbox">6</td>
</tr>
</table>
</td>
<td>
<table class="box red">
<tr class="color">
<td class="leftbox"></td>
<td class="rightbox">12</td>
</tr>
</table>
</td>
<td>
<table class="box green">
<tr class="color">
<td class="leftbox"></td>
<td class="rightbox">7</td>
</tr>
</table>
</td>
<td>
<table class="box blue">
<tr class="color blue">
<td class="leftbox"></td>
<td class="rightbox">7</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="cell30">Maßnahmen</td>
</tr>
<tr class="sub">
<td colspan="4">
<table>
<tr class="colGroup">
<td>
<table class="box yellow">
<tr class="color yellow">
<td class="leftbox"></td>
<td class="rightbox">6</td>
</tr>
</table>
</td>
<td>
<table class="box red">
<tr class="color red">
<td class="leftbox"></td>
<td class="rightbox">12</td>
</tr>
</table>
</td>
<td>
<table class="box green">
<tr class="color green">
<td class="leftbox"></td>
<td class="rightbox">7</td>
</tr>
</table>
</td>
<td>
<table class="box blue">
<tr class="color blue">
<td class="leftbox"></td>
<td class="rightbox">7</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
http://jsfiddle.net/ndxp5h12/8/
But when i open the document with word my css-style is gone. The most of my cells an tables don't have a border, and the background color is gone too?
When i remove the element styling (table, th etc.) then the border are ok, but the color's doesn't show in Word.
Where is the problem? How can I fix my stylesheet or how can i structure my table? Is there a common way?
Which element or class override another in Word? Or what should I not do that word read the CSS correct?
Thank you
Felix
You may have to add all of your styles within style attributes on your individual tables and cells.
For example:
<table style="background-color:green">
<tr>
<td style="*leftbox styles*"></td>
<td style="*rightbox styles*">7</td>
</tr>
</table>
This maybe can help:
go to "insert" tab, click "object" button (it's on the right)
choose "OpenDocument Text" which will open a new embedded word document
copy and paste your code from Visual Studio / Eclipse inside this embedded word page
save and close
How do you display code snippets in MS Word preserving format and syntax highlighting?
Unfortunately Word has issues with many different HTML/CSS tags, so I'm afraid it's a case of trial and error. When it comes to dt and dd you could replicate the formatting you want by using CSS classes and then applying them to suitable HTML alternatives.
even after setting the tr:last-child's border: none, border is still visible. The edit button should be after the last row. But it got position left. http://jsfiddle.net/priyaa2002/mBfk8/ Here is how it should be
You have a floating <tr> and a floating </div>:
<div id="wrapper">
<div class="para">
<table id="info-table">
<tr>
<td>name:</td>
<td id="name">name</td>
</tr>
<tr>
<td>id:</td>
<td id="myid">myuid</td>
</tr>
<tr>
<td>email:</td>
<td id="email">mysuperemail#email.com</td>
</tr>
<tr> <!-- WHY? -->
</table>
</div>
<div class="edit">
<button type="submit">edit</button>
</div>
</div> <!-- WHY? -->
Get rid of them like so:
<div id="wrapper">
<div class="para">
<table id="info-table">
<tr>
<td>name:</td>
<td id="name">name</td>
</tr>
<tr>
<td>id:</td>
<td id="myid">myuid</td>
</tr>
<tr>
<td>email:</td>
<td id="email">mysuperemail#email.com</td>
</tr>
</table>
</div>
<div class="edit">
<button type="submit">edit</button>
</div>
In the future validate your HTML ;)