set columns in table to invisible - html

The two tables are inside one div (please see code below for an cut out of the code from bottom table), I would like to make the first column of the bottom div invisible....any ideas? thanks for replies
<table align="center" class="detailstable" style="width:100%">
<tr>
<th style="width:70%;"></th>
<th style="text-align:left;">Summary</th>
<th style="text-align:right;"></th>
</tr>
<tr>
<th style="width:70%;"></th>
<td style="text-align:left; width:100px;">Labour</td>
<th style="text-align:right; width:100px;"><%: this.FormatMoney(LabourTotal)%></th>
</tr>
</table>

if you want to make it look like its 'merged' with the cell that contains the total value, use CSS 'border-right-style' on the desired cell, for example:
<th style="width:70%; border-right-style:none;"></th>

Don't create the unwanted column, and instead position the second (now two column wide) table using the style. I would probably have removed the width from the second table and replaced it with float:right to make it align to the right...

Related

set column Widths for Bootstrap Responsive Table in Repeat Control

I have a repeat control and for each row I want to set up a bootstrap responsive table. Right now it looks something like this:
the problem is that I would like to set the column widths so they line up better. I have tried to do a two row grid but the two rows collapse nicely but then the data is not under the Label. I have tried class="width:200px" or used % as well in the div but that seems to have no impact. Like wise if added to the of the .
I would settle for a grid or responsive table solution.
my code looks something like this:
<div class="table-responsive">
<table class="table table-bordered table-condensed " style="width:900px">
<thead>
<tr >
<th class="width:150px">Label</th>
<th class="width:250px">Default Approvers</th>
<th class="width:75px">Auto Process</th>
<th class="width:75px">Routing</th>
<th class="width:75px">Post Approval</th>
<th class="with:75px">Post Denial</th>
<th class="width:50px">Notify Late</th>
</tr>
</thead>
<tbody>
<tr>
<td>
.
.
.
</tbody>
First: you used class attributes to set style values. If you change to style then it should work.
I recommend you to use a colgroup though. http://www.w3schools.com/tags/tag_colgroup.asp

Table row span cell span

This is an assignment I need help with. I hate tables as is, but this is what it says:
"The first row in each table consists of one table cell which spans two columns that contain the real estate listing name. The second row in each table consists of two table cells."
My code:
<table>
<tr>
<th>
<h3>TEST</h3>
</th>
</tr>
<th rowspan="2"></th>
<td>Something here !</td>
</tr>
</table>
Just wanted to verify if I did this correctly? Here's the full code:
http://jsfiddle.net/4jzUc/
also, it's supposed to look like this: http://screencloud.net/v/aA5Y
You want to span the column, not the row (colspan vs rowspan). I think this is what you are looking for.
<table>
<tr>
<th colspan="2">
Title
</th>
</tr>
<tr>
<td>First cell</td>
</tr>
<tr>
<td>Second cell</td>
</tr>
</table>
No, your markup is not correct. It does not even comply with the HTML table model, as you can see by using http://validator.nu on your document with <!doctype html> slapped at the start. Still less it does do what the assignment calls for.
The assignment as such is very simple: you just a table with two rows and two columns, just so that the first row has only one cell, which spans two columns:
<table>
<tr><td colspan=2>Real estate name
<tr><td>A table cell <td>Another table cell
</table>
You could use th instead of the first td, since it is kind of a header cell, but beware then that this makes its content bold and centered by default (you can override this is in CSS).
As per the “supposed to look like” link, it seems that you are supposed to put an img element only in the first cell of the second row, and the second cell there contains text and a ul element. And a little bit of CSS too. Note that for this output, you will need to align the second row vertically to the top (using the HTML valign attribute or the CSS vertical-align property).
correct code:
<table>
<tr>
<th>
<h3>TEST</h3>
</th>
<th rowspan="2">RowSpan2!</th>
</tr>
<tr>
<td>Something here !</td>
</tr>
<tr>
<td>Something Else !</td>
</tr>
</table>

How can I make a HTML table with headers in one vertical column?

I want to make a HTML file that has the headers in one vertical column, and the data in the column to the right. There will only be 2 columns in total. I've looked at the html docs and seen stuff about scope, but I'm not entirely sure how to use it in this context. Example:
The HTML is pretty straightforward, just be sure to use the [scope] attribute to specify the correct orientation of the table.
<table>
<tbody>
<tr>
<th scope="row">City</th>
<td>$city</td>
</tr>
<tr>
<th scope="row">Latitude</th>
<td>$latitude</td>
</tr>
<tr>
<th scope="row">Longitude</th>
<td>$longitude</td>
</tr>
<tr>
<th scope="row">Country</th>
<td>$country</td>
</tr>
</tbody>
</table>
From the docs for the [scope] attribute:
The row state means the header cell applies to some of the subsequent cells in the same row(s).
You can create the tables with elements proceeded by elements like so:
<table>
<tr>
<th scope="row">Category 1</th><td>data1</td>
</tr>
<tr>
<th scope="row">Category 2</th><td>data2</td>
</tr>
<tr>
<th scope="row">Category 3</th><td>data3</td>
</tr>
Here is an example of it in action:
vertical headers

split html table

i have a html table which looks like this:
<table>
<thead>
<tr>
<th >title1</th>
<th >title2</th>
<th >title3</th>
<th >title4</th>
<th >title5</th>
<th >title6</th>
<th >title7</th>
</tr>
</thead>
<tbody>
<tr>
<td>data1</td>
...
<td>data7</td>
</tr>
</tbody>
the issue I am having is that I only have around 300px to put all this information in, I was wondering if there was some way that I can tell the table to split if it reaches the end of 300px limit. is this even possible ? or shall i just go back to using divs ?
I'm not sure what 'splitting' is, but a good alternative would be to wrap the table in a container with overflow-x: auto set. That will make it scrollable.
Live Example

HTML table headers alignment

I'm trying to space my HTML table headers using the width property and it's asif they are being ignored completely.
The 'Company Type' header is being split over two lines and so too is the Employment type? I do not have any table css in my css file. Which properties can I use to get each of the headers left-aligned and the next header along to start WIDTH pixels from the beginning of the previous header?
<thead style='float:left;'>
<tr>
<th style='width:270px;text-align:left;'>Company</th> <th style='width:150px;text-align:left;'>Company Type</th> <th style='width:80px;text-align:left;'>Employment Type</th>
</tr>
</thead>
<thead style='text-align:left;'>
<tr>
<th style='width:270px;'>Company</th>
<th style='width:150px;text-align:left;'>Company Type</th>
<th style='width:80px;text-align:left;'>Employment Type</th>
</tr>
</thead>
Try this and make sure that you have given width to all the header elements and total width does not exceed the table width.
I've never reliably got th and td width to work; not 100% sure they're meant to.
I usually just put a div inside the cell, and give that a width. Alternatively, add padding left and right to the th and td.
In a tableless way you could achieve that by this:
<div style="width:270px;float:left;">
Company
</div>
<div style="width:150px;float:left;">
Company Type
</div>
<div style="width:80px;float:left;">
Employment Type
</div>
Of course, you can style this up easily to your preference, and I'd keep the styles in a separate css file.
You could try 'nowrap' - but it isnt supported in HTML5
<th style='width:270px;text-align:left;'>Company</th>
<th style='width:150px;text-align:left;' nowrap>Company Type</th>
<th style='width:80px;text-align:left;' nowrap>Employment Type</th>