<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>table</title> <style type="text/css"> * { margin:0; padding:0; } .table { width:400px; margin:50px auto 0; border-collapse:collapse; display:table; } .td { display:table-cell; line-height:20px; vertical-align:top; border:1px solid #ccc; position:relative; vertical-align:middle; text-align:center; } .tip { width:50px; height:50px; position:absolute; left:100px; top:50px; background:red } .tr { display:table-row; } </style> </head> <body> <div class="table"> <div class="tr"> <div class="td"> <p>a</p> <p>d</p> <p>d</p> <div class="tip"></div> </div> <div class="td">a</div> <div class="td">a</div> </div> <div class="tr"> <div class="td"> <p>a</p> <p>a</p> <p>a</p> </div> <div class="td">a</div> <div class="td">a</div> </div> <div class="tr"> <div class="td"> <p>a</p> <p>g</p> <p>j</p> </div> <div class="td">a</div> <div class="td">a</div> </div> </div> </body> </html>
实际展示效果，火狐，谷歌以及ie8以上浏览器上，ie67我不考虑了
