give different width to different td in table

350
January 11, 2017, at 12:45 PM

I am creating a web app in which I want a table with multiple <tr> and <td>

here is my code

<tr>
  <th style="width:30px;">date</th>
</tr>
<tr>
   <td>10-10-2016</td>
</tr>

it worked fine until I add another tr

<tr>
   <td style="width:200px;">Expense incurred towards sessions</td>
</tr>

It is increasing the width of my date(th,td) or else it is showing me other td like

Expense

incurred

towards

sessions

I don't want to increase the width of my date td but want my second td to be on the same line

Expense incurred towards sessions

like this how I need to css this

This is my table

<table id="table" ng-hide="hidetable" class="table font" style="width:100%;
 margin-top:30px; padding-top:10px;">
Answer 1

Does this resemble anything you're after? Here is more on the colspan=" " attribute used to achieve this.

<table id="table" ng-hide="hidetable" class="table font" style="width:100%; 
 margin-top:30px; padding-top:10px;"> 
<tr> 
  <th style="width:30px;background-color:#f2f2f2;">date</th> 
  <td style="background-color:#f2f2f2;">10-10-2016</td> 
</tr> 
<tr> 
   <td colspan="2" style="background-color:#f2f2f2;">Expense incurred towards sessions</td> 
</tr> 
  </table>

Answer 2

Try:

    <table>
    <tr>
      <th style="width:30px;">date</th>
    </tr>
    <tr>
       <td>10-10-2016</td>
    </tr>
    <tr>
       <td colspan="2">Expense incurred towards sessions</td>
    </tr>
</table>
READ ALSO
jQuery fadeIn(), fadeOut() cause drastic performance hit

jQuery fadeIn(), fadeOut() cause drastic performance hit

I implemented a loading indicator (an animatedsvg) with fadeIn and fadeOut to show/hide it on a page which also has an animated canvas, and there is a considerable drop in performance of my canvas while these operations are occurring, even going so far as to crash a certain...

323
Remove duplicate CSS declarations across multiple files

Remove duplicate CSS declarations across multiple files

I'm looking to remove duplicate CSS declarations from a number of files to make implementing changes easierIs there a tool that can help me do that?

583
Best practise to realize up down arrows in select field

Best practise to realize up down arrows in select field

What is the best way to setup a percentage arrow up/down slider/selector in a select element in a web page like this:

371
How to recalculate css with jQuery window resize?

How to recalculate css with jQuery window resize?

I'm currently trying to recalculate the height of the li during window resize/scrolling inwards or outwards, but for some reason when the page loads it will no longer re-calculate the height and set the ul to it's child height

567