Ranjithkumar Ranjithkumar - 1 month ago 6
CSS Question

How to give two html elements in the same column?

I have to insert a check box and one more field into an existing

<td>
. However, these fields are currently not showing on one line. Please find the html below:

<!DOCTYPE html>
<html>
<body>

<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>

</tr>
<tr>
<td>
<p>Timer<p/>
<input type="checkbox" id="checkBox" name="checkBox" size="30"/>
</td>
<td>
Please check the box
<td>
</tr>
</table>

</body>
</html>


This outputs something like this:


Jill Smith


Timer Please check the box


[]



Here "Timer" and check box aren't on the same line (inside the same
<td>
).

Can anybody please help me out?

PS: I can't change the already available table format.

Reason for timer inside p:
Timer is a dynamic filed which have the count start from 20 to 0.
So I have to use
<p>
element id inside JavaScript which I didn't mention here.

Answer

td p,td input{float:left}
<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>      

  </tr>
  <tr>
    <td>
      <p>Timer<p/>
      <input type="checkbox" id="checkBox" name="checkBox" size="30"/>
   </td>
    <td>
      Please check the box
    <td>
  </tr>
</table>

td p,td input{display:inline}
<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>      

  </tr>
  <tr>
    <td>
      <p>Timer<p/>
      <input type="checkbox" id="checkBox" name="checkBox" size="30"/>
   </td>
    <td>
      Please check the box
    <td>
  </tr>
</table>

td p,td input{display:inline-block}
<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>      

  </tr>
  <tr>
    <td>
      <p>Timer<p/>
      <input type="checkbox" id="checkBox" name="checkBox" size="30"/>
   </td>
    <td>
      Please check the box
    <td>
  </tr>
</table>

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>      

  </tr>
  <tr>
    <td>
      <p>Timer<input type="checkbox" id="checkBox" name="checkBox" size="30"/><p/>
      
   </td>
    <td>
      Please check the box
    <td>
  </tr>
</table>

Update (comment request)

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>      

  </tr>
  <tr>
    <td>
      <p style="float:left">Timer<p/>
      <input  style="float:left" type="checkbox" id="checkBox" name="checkBox" size="30"/>
   </td>
    <td>
      Please check the box
    <td>
  </tr>
</table>

adding a class

.inline{
    display:inline
}
<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>      

  </tr>
  <tr>
    <td>
      <p class=inline>Timer<input  class=inline type="checkbox" id="checkBox" name="checkBox" size="30"/><p/>
      
   </td>
    <td>
      Please check the box
    <td>
  </tr>
</table>

Comments