Width of multi column part in a table cell
I have a table with a multi column part in a cell. Is there a way to reduce the width of the multi column part according to its content and center it horizontally in the outer table cell.
<table>
<tr>
<td style="text-align: center;">
<div style="column-count: 2; column-gap: 5mm;">
<table> ... </table>
</div
</td>
<tr>
</table>
The width of the table cell containing the div is much greater than the width of the inner table.
I have tried different 'display' settings for the div. With 'display: table-cell' the width of the div gets reduced but without a sufficient column-gap the columns do overlap - and still no horizontal centering.
I am using Prince 7.0 beta 1 on Windows.
How about specifying a fixed width on the <div>, and also set margin-left and margin-right to "auto"? This is the general method for centering block elements in CSS.
That works fine, but the problem is, that the text elements in the column table vary in lenght from page to page. Another point is, that the columns should have a defined gap between each other and not be spread over the available width.
The following code shows the problem with the overlapping (display: table-cell). The second column table without overlapping and centered horizontal would be perfect.
<html>
<head>
<title>Test</title>
</head>
<body>
<table >
<tr>
<td style="width: 60mm;
border: 1px solid red;
text-align: center;">
<div style="display: block;
column-count: 2;
column-gap: 2mm;
column-rule: black solid 1px;
margin-left: auto;
margin-right: auto;">
<table style="background-color: green;">
<tr><td>1</td><td>A</td></tr>
<tr><td>2</td><td>B</td></tr>
<tr><td>3</td><td>C</td></tr>
<tr><td>4</td><td>D</td></tr>
<tr><td>5</td><td>E</td></tr>
<tr><td>6</td><td>F</td></tr>
</table>
</div>
</td>
</tr>
<tr>
<td style="width: 60mm;
border: 1px solid red;
text-align: center;">
<div style="display: table-cell;
column-count: 2;
column-gap: 2mm;
column-rule: black solid 1px;
margin-left: auto;
margin-right: auto;">
<table style="background-color: green;">
<tr><td>1</td><td>A</td></tr>
<tr><td>2</td><td>B</td></tr>
<tr><td>3</td><td>C</td></tr>
<tr><td>4</td><td>D</td></tr>
<tr><td>5</td><td>E</td></tr>
<tr><td>6</td><td>F</td></tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
For the first example you can remove the margin auto from the div and apply it to the inner table instead, does that produce the desired effect?
Not quite, the content now gets centered inside the columns but sill with an 'undefined' gap between the columns. In the example the two green column contents should be 1mm left and 1mm right of the column rule.
I don't think that layout is possible, as that wouldn't be centered: the content of the left column would need to be right aligned, and the content of the right column would need to be left aligned to make that happen. I'm not sure if the layout you are trying to achieve is possible to create with columns and tables.
I used the prince.exe which fixes the 'diplay: inline-block' problem and apart of the overlapping/gap/rule problem this display mode produces the desired result.
The column still overlap, no rule is shown but the column part is centered with a little shift to the right.
<html>
<head>
<title>Test</title>
</head>
<body>
<table style="width: 60mm;">
<tr>
<td style="border: 1px solid red; text-align: center;">
<div style="display: inline-block;
background-color: blue;
column-count: 2;
column-gap: 2mm;
column-rule: black solid 1px;
">
<table style="background-color: green;">
<tr><td>1</td><td>A</td></tr>
<tr><td>2</td><td>B</td></tr>
<tr><td>3</td><td>C</td></tr>
<tr><td>4</td><td>D</td></tr>
<tr><td>5</td><td>E</td></tr>
<tr><td>6</td><td>F</td></tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
I can't say for sure, but this looks like a bug to me, or at least behaviour that is quite difficult to explain. We'll investigate this.
The issue is that shrink-to-fit inline-block elements without a specified width will not take the width of columns into account. This can be fixed by adding an explicit width to the inline-block and then centering the nested table, like this:
<html>
<head>
<title>Test</title>
</head>
<body>
<table style="width: 60mm;">
<tr>
<td style="border: 1px solid red; text-align: center;">
<div style="display: inline-block;
width: 50mm;
background-color: blue;
column-count: 2;
column-gap: 2mm;
column-rule: black solid 1px;
">
<table style="background-color: green; margin: 0 auto">
<tr><td>1</td><td>A</td></tr>
<tr><td>2</td><td>B</td></tr>
<tr><td>3</td><td>C</td></tr>
<tr><td>4</td><td>D</td></tr>
<tr><td>5</td><td>E</td></tr>
<tr><td>6</td><td>F</td></tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
Could the behavior 'not taking the width of columns into account' change in a future release or will/has it to stay this way?
We will fix this, but it may not be until after 7.0.
I spoke too soon, actually this fix will be included in the 7.0 release.
Great, thanks a lot for your superb support.
The 7.0 release is now out, and includes the fix for this problem. Thanks for all the help tracking it down!
