HTML dropdown multi columns

问题

I have a question about a select in HTML. Now I have 2 dropdowns with values. for example:

<select name="healthy" id="healthy">
    <optgroup="fruit"></optgroup>
    <option value="apple">apple</option>
    <option value="pineapple">pineapple</option>
    <optgroup="vegetables"></optgroup>
    <option value="carrots">carrots</option>
    <option value="tomato">Tomato</option>
</select>

Now instead of showing these groups in 1 column, I would want to show them in different columns. Is that possible, without changing the code to much?

Edit After getting the same answer twice, that it's not possible, I will change this question a little. Is it possible to make your own form element? For example in Actionscript, VB.Net, asp.Net it's possible to make your own elements. I know you can change the layout with CSS, but that's not the solution. So what I try to say, I just want to make my own element for HTML, based on a select.

回答1:

I think I found an answer. my html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="select.css" rel="stylesheet" type="text/css" />
</head>

<body>
<select name="sel" id="sel">
<optgroup label="group1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</optgroup>
<optgroup label="group2">
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</optgroup>
</select>
</body>
</html>

And my css code

@charset "utf-8";
/* CSS Document */

#sel{
    background-color:#FF0;
    width:40px;
    }
#sel optgroup{
    background-color:#CFF;
    display:inline-table;
    width:20px;

    }

-- edit -- problem: IE and chrome doesn't recognize inline-table. so it won't work on those browsers.