I'm trying to attribute an width for cells but it doesn't work. I used CSS to make it, since width is not supported in HTML5. In my problem I have a table with headers and inside that table I have another table with a scroll to show the results, I need to order the cell results by the headers attributing the same width as headers. Can someone help me?
Here's the fiddle . Thank you!
Here's what i've tried:
<table class="two">
<thead>
<tr>
<th style="width:150px">Tipo de Anúncio</th>
<th style="width:150px">Tipo de Imóvel</th>
<th style="width:150px">Localização</th>
<th style="width:150px">Mediador</th>
<th style="width:150px">Preço</th>
<th style="width:150px">Área</th>
</tr>
</thead>
<tbody class="scroll">
<tr>
<td colspan="2">
<div class="scroll">
<table>
<tr>
<td style="width:150px">January</td>
<td style="width:150px">$100</td>
<td style="width:150px">February</td>
<td style="width:150px">$80</td>
<td style="width:150px">February</td>
<td style="width:150px">$80</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td>February</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
</tr>
You have several problem in your layout but the main is not the width but the colspan : (thw width work right)
your th don't wrap all the column. If ypu have six column you need a colspan = 6
<tbody class="scroll">
<tr>
<td colspan="6">
I have touched only few element but ypou can see a preliminary result in this jsfiddle
Related
<div className="table-responsive">
<table className="table table-sm">
<thead>
<tr className="table-active">
<th>name</th>
<th>nickname</th>
<th>age</th>
<th>gender</th>
<th>height</th>
<th>weight</th>
</tr>
</thead>
<tbody id="table-body">
<tr>
<td>Alex</td>
<td>Alex</td>
<td>24</td>
<td>Male</td>
<td>1.70</td>
<td>60</td>
<tr>
</tbody>
</table>
</div>
i want css style scrollable in header table and under table and don't want fixed head table on top
so i was searching all day in google I can't found result i want please tell or help me.
I'm trying to make a single row with one single column occupy entire space of a row, and no a single column space:
<table>
<thead>
<tr>
<th>C1</th>
<th>C2</th>
<th>C3</th>
<th>C4</th>
</tr>
</thead>
<tbody>
<tr>
<td>L1</td>
<td>L2</td>
<td>L3</td>
<td>L4</td>
</tr>
<tr>
<td>ONE LINE</td> #THIS ONE I WANT TO OCCUPY SPACE OF 4 TDs
</tr>
</tbody>
</table>
I already tried it:
<td style="width:100%">ONE LINE</td>
and
<tr style="width:100%">
<td>ONE LINE</td>
</tr>
You can use the colspan attribute
<table>
<thead>
<tr>
<th>C1</th>
<th>C2</th>
<th>C3</th>
<th>C4</th>
</tr>
</thead>
<tbody>
<tr>
<td>L1</td>
<td>L2</td>
<td>L3</td>
<td>L4</td>
</tr>
<tr>
<td colspan="4">ONE LINE</td>
</tr>
</tbody>
</table>
I have a responsive table where the end column shows money figures. Currently it looks like this:
But I want it to do this:
There may not be any data so the £ sign will be replace with N/A which should also be pulled to the right of the column.
The data is fetched from MySQL but here is a simplified snippet of my code:
<table id="mytable" class="table table-bordred table-striped">
<thead>
<th>Reference</th>
<th>Client</th>
<th>Description</th>
<th>Money</th>
</thead>
<tbody>
<tr>
<td>#1234</td>
<td>Josh Blease</td>
<td>Needs a new filter fixing</td>
<td class='money'>
<div class='text-right'>Budget: £123,456</div>
<div class='text-right'>Value: £200,000</div>
<div class='text-right'>Spent: N/A</div>
</td>
</tr>
</tbody>
Divs are useful but Ii don't think that be the best solution for this case maybe you need to use better the table properties
http://www.usabilidad.tv/tutoriales_html/colspan_y_rowspan.asp
<table id="mytable" class="table table-bordred table-striped">
<thead>
<th>Reference</th>
<th>Client</th>
<th>Description</th>
<th colspan="2">Money</th>
</thead>
<tbody>
<tr>
<td rowspan="4">#1234</td>
<td rowspan="4">Josh Blease</td>
<td rowspan="4">Needs a new filter fixing</td>
</tr>
<tr>
<td>Budget</td>
<td>£123,456</td>
</tr>
<tr>
<td>Value</td>
<td>£200,000</td>
</tr>
<tr>
<td>Spent</td>
<td>N/A</td>
</tr>
</tbody>
</table>
<table id="mytable" class="table table-bordred table-striped">
<thead>
<th>Reference</th>
<th>Client</th>
<th>Description</th>
<th>Money</th>
</thead>
<tbody>
<tr>
<td>#1234</td>
<td>Josh Blease</td>
<td>Needs a new filter fixing</td>
<td class='money'>
<div class='text-right'><span>Budget:</span> £123,456</div>
<div class='text-right'><span>Value:</span> £200,000</div>
<div class='text-right'><span>Spent:</span> N/A</div>
</td>
</tr>
</tbody>
and
#mytable tbody tr td .text-right span{
min-width:200px;
max-width:300px;
display: inline-block;
}
Spans need to be set as inline-block otherwise the width properties won't take hold as they are by default inline only elements.
Setting the min and max width will force the span container to not go below or above a certain point, meaning that your other text will be forced to stay to the left of the (example) 200px mark even if your initial text (as in spent) only ends up being (again, example) 80px
I have following table in my site but for some reason the style width:100px does not work for td. Probably some other css is preceding. I have also tried !important but it still doesn't work.
What can I do to get the width to precede all else?
<table>
<tbody>
<tr>
<th>Resurs</th>
<th>Service</th>
<th>Datum</th>
<th>Tid från</th>
<th>Tid till</th>
<th></th>
</tr>
<tr>
<td style="text-align:left">Resource</td>
<td style="width:100px;word-break:break-all">kjslkjfsdjfj sfjlsjfklsljf slfj lsjfs flsj fkljskf lksj fsjf sdlfj lsjföslajfölsjföl afö aölfjas fasöfj </td>
<td>2015-02-22</td>
<td>10.00</td>
<td>11.00</td>
<td>sdfdsf</td>
</tr>
</tbody>
</table>
Does anyone know how I can get the width to work?
Check this jsfiddle
<table>
<tbody>
<tr>
<th>Resurs</th>
<th>Service</th>
<th>Datum</th>
<th>Tid från</th>
<th>Tid till</th>
<th></th>
</tr>
<tr>
<td style="text-align:left">Resource</td>
<td style="width:330px;word-break:break-all">kjslkjfsdjfj sfjlsjfklsljf slfj lsjfs flsj fkljskf lksj fsjf sdlfj lsjföslajfölsjföl afö aölfjas fasöfj </td>
<td>2015-02-22</td>
<td>10.00</td>
<td>11.00</td>
<td>sdfdsf</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/vjka7b5j/
its working properly ,
I have problem with my table JqMobile style is not working when I uploaded to the server I want datat be horizontal not broken.
http://jsfiddle.net/Tbu9U/
html
<table data-role="table" id="productOrders" data-mode="reflow" class="ui-table ui-table-reflow">
<thead>
<tr>
<th>Code</th>
<th>Name</th>
<th>Price</th>
<th>Qty.</th>
<th>Ext.</th>
</tr>
</thead>
<tbody>
<tr>
<td><b class="ui-table-cell-label">Code</b></td>
<td><b class="ui-table-cell-label">Name</b></td>
<td><b class="ui-table-cell-label">Price</b></td>
<td><b class="ui-table-cell-label">Qty.</b></td>
<td><b class="ui-table-cell-label">Ext.</b></td>
</tr>
<tr>
<td>uj7uu</td>
<td>games</td>
<td class="dollars">$70</td>
<td>3</td>
<td>$210</td>
</tr>
</tbody>
</table>
Here is your fiddle updated: http://jsfiddle.net/ezanker/Tbu9U/1/
The only change was on the table markup, remove the class ui-table-reflow and instead add ui-responsive:
<table data-role="table" id="productOrders" data-mode="reflow" class="ui-table ui-responsive">