Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to fit a select tag in a table cell properly

I am desperately trying to make a select tag fit in a table cell like it belongs there, not like someone wedged it in with a crowbar. Here is the code followed by the picture of how it appears:

<tr>
  <td class="lblCell_L" >ISIN Code </td>
  <td id="ISINcb" class="lblCell_R" align="center">
   <select id='isinz' width="144" style="height:19px; width:140px; text-align:center;">
       <option id="ISIN1" onclick="JavaScript:quarterUpdate()" >A</option>
       <option id="ISIN2" onclick="JavaScript:quarterUpdate()" >B</option>
       <option id="ISIN3" onclick="JavaScript:quarterUpdate()" >C</option>
       <option id="ISIN4" onclick="JavaScript:quarterUpdate()" >E</option>
   </select>
  </td>
  <td class="lblCell_tx" id="isinOptions" style="color:#a56;">0</td>
</tr>

The way this comes out in FireFox:

Select Tag has its own border inside the cell borders

So, this is really ugly because the Select object has its own borders visible inside the cell, which has its own borders. It is like stuffing a goose with pork... dismal looking!

Can the table cell borders be suppressed to allow the Select Tag borders to take their place?

You may notice, also, that the height of that cell is higher than the other "text-only" cell.

like image 877
DKean Avatar asked Apr 12 '13 18:04

DKean


People also ask

How do you fit content in a table cell?

In "Table Tools" click the [Layout] tab > locate the "Cell Size" group and choose from of the following options: To fit the columns to the text (or page margins if cells are empty), click [AutoFit] > select "AutoFit Contents." To fit the table to the text, click [AutoFit] > select "AutoFit Window."

How do you add a select tag to a table in HTML?

The <select> element is most often used in a form, to collect user input. The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the drop-down list will be submitted). The id attribute is needed to associate the drop-down list with a label.

How do you set the size of a select tag in HTML?

Definition and Usage The size attribute specifies the number of visible options in a drop-down list. If the value of the size attribute is greater than 1, but lower than the total number of options in the list, the browser will add a scroll bar to indicate that there are more options to view.

How do you fit an image in a table?

The second is to click in each table, go to the Table Tools > Layout tab, click the AutoFit button, and choose Fixed Column Width. With those settings, you can drag a picture from Windows Explorer, or use the Insert > Picture dialog, to insert one picture into one cell.


2 Answers

Play with the border of the select (this may or may not work in Safari)

select {
    border: 0;
    width: 100%;
}

This is a JsFiddle: http://jsfiddle.net/EuNw4/

Also instead of a lot of option onclick="JavaScript:quarterUpdate()" use select onchange"JavaScript:quarterUpdate()"... Inline Javascript like this shouldn't be used, you should do:

// jQuery
jQuery(document).ready(function($) {
    $('#isinz').on('change', quarterUpdate());
});
like image 149
Axel A. García Avatar answered Sep 16 '22 17:09

Axel A. García


From your question, I understand that this is what you want:

http://jsfiddle.net/8vwV3/

table {
    border-collapse: collapse;
}

td {
    border: 1px solid #999;
    padding:3px 10px;
}

td select {
    border: none;
}
like image 27
Arbel Avatar answered Sep 17 '22 17:09

Arbel