实现table不难, 难点在于border。
如何保证每一行中的每一个div的border连起来。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Embedded div</title> <style type="text/css"> body { padding: 10px; margin: 10px; } .table { overflow: hidden; border-color: green; border-style: solid; border-width: 1px 0px 0px 1px; width: 606px; } .tr { overflow: hidden; _zoom: 1; border-bottom: green solid 1px; } .td { width: 100px; overflow: hidden; float: left; border-color: green; border-style: solid; border-width: 0px 1px 0px 0px; text-align: center; padding-top: 5px; padding-bottom: 5005px; margin-bottom: -5000px; } .td input, .td select { width: 96px !important; width: 94px; *vertical-align: middle; } </style> </head> <body> <div class="table"> <div class="tr"> <div class="td"> <input type="text" value="China"/> </div> <div class="td"> <input type="radio" value="China" /> </div> <div class="td"> <select> <option>China</option> <option>Japan</option> </select> </div> <div class="td"> China China China China China China China China China China China </div> <div class="td"> China </div> <div class="td"> China </div> </div> <div class="tr"> <div class="td"> China </div> <div class="td"> China </div> <div class="td"> China </div> <div class="td"> China </div> <div class="td"> China </div> <div class="td"> China </div> </div> <div class="tr"> <div class="td"> China </div> <div class="td"> China </div> <div class="td"> China </div> <div class="td"> China </div> <div class="td"> China </div> <div class="td"> China </div> </div> <div class="tr"> <div class="td"> China </div> <div class="td"> China </div> <div class="td"> China </div> <div class="td"> China </div> <div class="td"> China </div> <div class="td"> China </div> </div> </div> </body> </html>