I am creating an Index page in an MVC 1.0 application and want to right-align the text in one of the columns. I have tried to do this by creating an extra class in the td style and setting the "text-align: right" in this but this doesn't appear to be being applied to that element.
In my CSS file I have:
table td
{
padding: 5px;
border: solid 1px #e8eef4;
}
table td.numeric
{
text-align: right;
}
In my view I have:
<table>
<tr>
<th>Location</th>
<th>Duration</th>
</tr>
<% foreach (var item in Model) { %>
<tr>
<td><%= Html.Encode(item.Location.Description) %></td>
<td class="numeric"><%= Html.Encode(itemDuration) %> min</td>
</tr>
<% } %>
</table>
Why wouldn't the text-align style be being used?
It works for me. Are you sure you don't have another CSS property overriding this one?
Also, have you checked to make sure your table width is such that you can actually see that the second td is right aligned? My guess is that your table isn't expanding properly. Try changing it's tag to:
<table width="100%">
Make sure you are importing the style sheet in your view.
That should do it. Check for other conflicting styles in your stylesheet. If you're using a CSS reset, it might be in that.
Related
I was browsing the last hours to find a solution for my problem with latest puppeteer (2.0.0) / chromium 78.0.x to get our printing system working. We allow to setup page breaks in tables, which worked find in PhantomJS renderer, but not in the puppeteer/chromium solution.
Beside many little difference in global css and printing PDF header/footer the printing of tables was the last problem (hopefully).
It turns out that the "page-break-before: always" is simply ignored.
Example:
<table>
<thead> ... </thead>
<tbody> ...
<tr style="page-break-before: always;"> ...should be on next page ... </tr>
</tbody>
</table>
Some of the Chrome forum articles point out, this has been solved.
So the question is what is causing the problem.
Regards,
Andre
PS) Later we found now: put a "display: block" on all tags of the table solves the problem. Maybe that helps someone. Any comments on that?
<table style="display: block;">
<thead style="display: block;"> ... </thead>
<tbody style="display: block;"> ...
<tr style="display: block; page-break-before: always;"> ...is now on the next page ... </tr>
</tbody>
</table>
Bad news for the solution we provided above. This destroys the feature of having table headers on each page.
setup 1)
Setting "display: block;" for the thead will disable the feature of having the table header on each page.
==> no page break
setup 2)
Set the thead to "display: table-header-group;" and tbody to "table-row-group" then the chrome will ignore the page-breaks.
==> no table headers on each page
setup 3) Having the thead: "display: table-header-group;" and the tbody: "display: block" is destroying the column structure. The body will be rendered only on the first column.
==> Destroys the table. the body is just in the first column
Here comes our hack to solve the problem. we use setup 3, with this:
- we build a table with just one column
- the column contains a table with all columns we really want to render
- the column widths are set to fix values (that was anyway the case in our rendering system)
<table>
<thead>
<tr>
<td> <table> .... the header of the real table </table> </td>
</tr>
</thead>
<tbody style="display:block;">
<tr>
<td>
<table> .... one row of the real table </table>
<td>
</tr>
<tr>
<td>
<table> .... another row of the real table </table>
<td>
</tr>
</tbody>
</table>
I am creating an 2 column grid using jquery mobile. By default both the columns take 50% width. I want to customize in such a way that first column will take content size and the remaining space is allotted to column B. Any help as how this can be achieved.
You can do this easily with a TABLE:
<table class="tblcontainer">
<tr>
<td class="fluidCell"><input type="search" name="search" id="txt" placeholder="Search something" /></td>
<td class="fixedCell" >Go</td>
</tr>
</table>
.tblcontainer {
width: 100%;
}
.tblcontainer .fixedCell {
width: 1%;
padding-left: 8px;
}
Working DEMO
I am trying to get a footer in a generated pdf file. I am using this library
https://github.com/andyhutch77/MvcRazorToPdf
Is there any way to get some of my content to the bottom of the page? Unfortunately pdf does not respond to position:absolute; bottom:0px; or margin-bottom.
The page shows an unknown amount of records on the page, so I cannot do it statically.
I found a way to solve this problem. It's not very neat, but I doubt there are other ways since MvcRazorToPdf does not support the margin and position styles.
<table id="wrapper" style="height:100%;">
<tr>
<td valign="top">
Put your site content here.
</td>
</tr>
<tr>
<td valign="bottom">
Put your footer here.
</td>
</tr>
</table>
If I add the following slide into the default presentation provided by reveal.js, then the table is not centred.
<section>
<p>This is centred</p>
<table>
<tr>
<td>This</td>
<td>is</td>
<td>not</td>
</tr>
</table>
</section>
I can fix it by adding in padding, but this then becomes dependent on the screen size, and I am worried that when I go to present the screen will be a different size. There must be a better way?
According to this and my testing, if you add the reveal class to your table, the newest reveal.js should center it.
<section>
<p>This is centred</p>
<table class="reveal">
<tr>
<td>This</td>
<td>is</td>
<td>not</td>
</tr>
</table>
</section>
I want to create a table that has drag-and-drop sortable items within a single column but where the movement of an item in an individual column will not impact the position of items in other columns.
The code below sorts entire rows (both left and right columns), not just the right column. It doesn't seem to be addressed in the JQuery UI docs. Has anyone tried to do this before?
<script>
$(function() {
$("table tbody").sortable({
handle: '.handle'
}).disableSelection();
});
</script>
<table>
<tbody id="sortable">
<tr>
<td>1 - Column Item I Want to Stay In Place</td>
<td class="handle">Item 1 - The Part That Should Be Draggable/Sortable</td>
</tr>
<tr>
<td>2 - Column Item I Want to Stay In Place</td>
<td>Item 2 - The Part That Should Be Draggable/Sortable</td>
</tr>
<tr>
<td>3 - Column Item I Want to Stay In Place</td>
<td class= "handle">Item 3 - The Part That Should Be Draggable/Sortable</td>
</tr>
</table>
I don't believe you can do that with table cells (at least I couldn't get it to work with normal sortables).
There is another option though. Instead of using a table, you could use lists that look like tables.
You can set up a style for columns to define their widths:
.column {
width: 100px;
list-style: none;
float: left;
}
Then, define each column as a list:
<ul class="column">
<li>Fixed 1</li>
<li>Fixed 2</li>
</ul>
<ul class="sortable column">
<li>Sortable 1</li>
<li>Sortable 2</li>
</ul>
<ul class="sortable column">
<li>Sortable 3</li>
<li>Sortable 4</li>
</ul>
Then all you have to do is apply your sortable to the sortable lists:
$(".sortable").sortable();
Here is a fiddle to illustrate: demo
Another option would be to disregard sortables completely and use draggable and droppable controls instead. You would have to manually alter the DOM though using the "drag" and "drop" events of these controls.