I have a table that has some Fill in the blanks such as a form and I want to create a HTML Table that looks a lot like the real PDF File how do you create 2 Lines in <td> That look a lot like this:
Right now it looks like this in the page:
Here is the Raw HTML of how its done:
<table>
<tr><td><font>Balance Forward: $1,000.00</font><br/>
<font>______________________________________</font></td></tr></table>
You may simply use border :
span {
padding: 0 50px;
border-bottom: 1px solid;
}
<table>
<tr>
<td>
Balance Forward: <span>$1,000.00</span>
</td>
</tr>
</table>
or like this if you want to keep a table structure
.border {
padding: 0 50px;
border-bottom: 1px solid;
}
<table>
<tr>
<td>
Balance Forward:
</td>
<td class="border">
$1,000.00
</td>
</tr>
<tr>
<td>
Balance Forward:
</td>
<td class="border">
$10.00
</td>
</tr>
</table>
<table>
<tr>
<td>
<font>
Balance Forward: <u> $1,000.00</u>
</font>
<br/>
</td>
</t>
</table>
Try the HTML u tag...
<table>
<tr>
<td>
Balance Forward:
</td>
<td class="border">
<u>$1,000.00</u>
</td>
</tr>
<tr>
<td>
Balance Forward:
</td>
<td class="border">
<u>$10.00</u>
</td>
</tr>
</table>
Related
I have a problem using Bootstrap tables in Angular:
My <td> tags does not fit the corresponding <th> from my tableheader: I am not sure, if it is caused due my calls to the template presenting the <td>:
Here is my code:
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Students</th>
<th>Links</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let c of tests">
<app-preview-container id={{c.id}} name={{c.name}} description={{c.description}} studentCount={{Count[c.id]}}"></app-preview-container>
</tr>
</tbody>
</table>
And thats the component which gets called (<app-preview-container>):
<td>
{{name}}
</td>
<td>
{{description}}
</td>
<td>
{{count}}
</td>
<td>
some buttons
</td>
Does anyone has a tip how I can fix that? I have tried a lot using Bootstrap width-params like w-xx or col-md-x or col-x or using scope="col"/"row". But none of these fixed it.
Tables often look that way when you change <tr> / <td> display property. HTML tables have their own unique display properties display: table-row; and display: table-cell;.
You either have done that or wrapped your <td>s with additional div.
You can inspect your table in the console, and check if <td>s are direct children of <tr> and then set by hand <tr> and <td> display property to table-row and table-cell.
An example of a broken table:
td {
border: 1px solid gray;
}
*[style] {
outline: 2px dashed red;
}
<table>
<tr>
<td>
Column 1
</td>
<td>
Column 2
</td>
<td>
Column 3
</td>
</tr>
<tr>
<tr style="display: block;">
<td>
Broken
</td>
<td>
Row
</td>
<td>
!
</td>
</tr>
<tr>
<td style="display: inline-block;">
Broken td
</td>
<td>
!
</td>
<td>
!
</td>
</tr>
<tr>
<td>
Correct
</td>
<td>
row
</td>
<td>
!
</td>
</tr>
</table>
i have a table,like:
<html>
<head></head>
<body>
<table class=" top-10">
<thead>
<tr>
<th>index</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td> john </td>
</tr>
<tr>
<td> 2 </td>
<td> mia </td>
</tr>
<tr>
<td> 3 </td>
<td> james </td>
</tr>
<tr>
<td> 4 </td>
<td> creed </td>
</tr>
<tr>
<td> 5 </td>
<td> perty </td>
</tr>
... and so on
</tbody>
</table>
</body>
</html>
This is a list
and I want the top three indexes to have different colors
It's kind of like a hot list
How do I write CSS3 styles to make this table look like this?
yes,The code for the first answer looks pretty neat, but there's one problem we seem to be missing.No matter how many pages there are, the first three have this effect.
How can index=1/2/3 have this effect?
You can use CSS nth-child:
https://css-tricks.com/useful-nth-child-recipies/
Example:
.top-10 tr:nth-child(1) td:first-child {
background-color: red;
}
.top-10 tr:nth-child(2) td:first-child {
background-color: orange;
}
.top-10 tr:nth-child(3) td:first-child {
background-color: yellow;
}
I'm trying to make a fairly simple table with a rowspan, and it works as expected. However, the problem is with cells appearing after the all the spanned cells are resolved; they are not positioned where I think they should be.
Here's my code:
<html>
<body>
<table width="100%" border="1">
<tr>
<td rowspan="7">
7 row
</td>
<td>
1 row
</td>
</tr>
<tr>
<td>
1 row
</td>
</tr>
<tr>
<td rowspan="5">
5 row
</td>
</tr>
<tr>
<td>
<i>This shouldn't be here, but below and aligned to the left side of the table</i>
</td>
<td>
<i>This shouldn't be here, but below and aligned at the right side of the table</i>
</td>
</tr>
</table>
</body>
</html>
Here's how it renders in Chrome and Firefox (I don't have the reputation to post inline images at Stack Overflow):
http://embernet.com/misc/rowspan.gif
Those two wordy cells really should be in the columns 1 and 2 that were already established, not as new columns 3 and 4.
The problem seems to come from me spanning rows that are never individually realized. Keep in mind this is part of a larger, dynamically generated table that in some cases will show each of the 7 rows. I know someone will inevitably ask why I need to do this.
I don't see anything in the specs that suggests I cannot rowspan like this, so I'm hoping I'm just missing something obvious.
A JSFiddle is here: https://jsfiddle.net/mLard575/
I am not sure what you are expecting. I give two possibilities as per my understanding.
Choose as per your requirements
First Method:
table {
border-collapse: collapse;
}
td {
padding: 20px;
border: 1px solid black;
text-align: center;
}
<body>
<table>
<tbody>
<tr>
<td rowspan="7">7</td>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td rowspan="5"> 5 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
<td> 1 </td>
</tr>
</tbody>
</table>
</body>
Second Method:
table {
border-collapse: collapse;
}
td {
padding: 20px;
border: 1px solid black;
text-align: center;
}
<body>
<table>
<tbody>
<tr>
<td rowspan="7">7</td>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
<td> 1 </td>
</tr>
</tbody>
</table>
</body>
If these two methods are not suited for you. Just explain little bit more with diagram example to update the code.
I am trying to style a specific element inside a datepicker using CSS. Although I thought that it must be super simple using the nth selectors I can't seem to figure out how it is possible.
I have CSS and HTML code like this:
.ui-datepicker tr td:not(.ui-state-disabled) + td:nth-of-type(1)
{
background-color: red;
}
<table class="ui-datepicker">
<tr>
<td class="ui-state-disabled">
...
</td>
<td class="ui-state-disabled">
...
</td>
<td>
This is the td element I like to select
</td>
<td>
...
</td>
</tr>
</table>
<table class="ui-datepicker">
<tr>
<td class="ui-state-disabled">
...
</td>
<td class="ui-state-disabled">
...
</td>
<td class="ui-state-disabled">
...
</td>
<td class="ui-state-disabled">
...
</td>
<td>
This is the td element I like to select
</td>
<td>
...
</td>
<td>
...
</td>
</tr>
</table>
I would like to select the first td element after the last ui-state-disabled element. The problem is that the position of that td element as well as the number of td elements is not always the same. You can see what I tried in the CSS code of the snippet however it is not working. What I am looking for is a "first occurrence" selector. Is there any way to accomplish this using only CSS?
td.ui-state-disabled + td:not(.ui-state-disabled) {
color: red;
}
<table class="ui-datepicker">
<tr>
<td class="ui-state-disabled">
...
</td>
<td class="ui-state-disabled">
...
</td>
<td>
...
</td>
<td>
...
</td>
</tr>
</table>
<table class="ui-datepicker">
<tr>
<td class="ui-state-disabled">
...
</td>
<td class="ui-state-disabled">
...
</td>
<td class="ui-state-disabled">
...
</td>
<td class="ui-state-disabled">
...
</td>
<td>
...
</td>
<td>
...
</td>
<td>
...
</td>
</tr>
</table>
I'm trying to merge tables together by using colspan, but cant seem to create my table. How can i merge tables columns together like following:
The general layout would be:
table,
td {
border: 1px solid #000;
}
table {
width: 50%;
border-collapse: collapse;
}
<table>
<tr>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
Here is the solution
HTML code is here:
<table width="500" border="1" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
CSS code is here :
table,td {
border-collapse: collapse;
}
JS fiddle Link : http://jsfiddle.net/naveenkumarpg/543c3896/
if you need exact widths for td's you have to use class selector and adjust accordingly