將表格與div對齊

我在我的網頁中有一個表格和一個div。我希望我已添加到頁面末尾的表格與div（其中有子菜單）對齊。如何用一般方法解決這個問題？將表格與div對齊

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> 
    <script> 
    $(function(){ 

     //Hide all the sub menus 
     $('.sub-menu').hide(); 

     $("li:has(ul)").click(function(){ 
      //Find the child ul and slideToggle 
      $(this).children("ul").slideToggle(); 
     }); 
    }); 

    </script> 
    <title>Gestione Esercizi</title>

CSS：

<style> 
    body { background-color:#ffffff; } 
    div.ex { 
     height:250px; 
     width:150px; 
     padding:10px; 
     border:1px solid gray; 
     margin:0px; 
    } 
    input { 
     padding: .5em; 
     color: #ffffff; 
     text-shadow: 1px 1px 1px #000; 
     border: solid thin #882d13; 
     -webkit-border-radius: .7em; 
     -moz-border-radius: .7em; 
     border-radius: .7em; 
     -webkit-box-shadow: 2px 2px 3px #999; 
     box-shadow: 2px 2px 2px #bbb; 
     background-color: #ce401c; 
     background-image: -webkit-gradient(linear, left top, left bottom, from(#e9ede8), to(#ce401c), color-stop(0.4, #8c1b0b)); 
    } 
</style> 
</head>

HTML：

<body onload="window.resizeTo(600,600)"> 
    <div id="header" style="background-color:#ffffff;"> 
     <div style="position:absolute; bottom:0; right:0; width: 20x; height: 20x; background-image: url(default_app_logo.png)"> 
     </div> 
     <input type="button" value="Pianifica Allenamento" onclick="location.href='index.html';"/> 
     <input type="button" value="Statistiche" onclick="location.href='index.html';"/> 
     <input type="button" value="Presenze" onclick="location.href='index.html';"/> 
     <input type="button" value="Varie Sez.SFW" onclick="location.href='index.html';"/> 
    </div> 
    <div class="ex"> 
     <ul> 
      <li><a href="#">Categoria1</a></li> 
      <li><a href="#">Categoria2</a> 
       <ul class="sub-menu"> 
        <li><a href="#">Esercizio1</a></li> 
        <li><a href="#">Esercizio2</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Categoria3</a></li> 
      <li><a href="#">Categoria4</a> 
       <ul class="sub-menu"> 
        <li><a href="#">Esercizio1</a></li> 
        <li><a href="#">Esercizio2</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Categoria5</a></li> 
     </ul> 
    </div> 
    <table border="1" > 
     <tr> 
      <td rowspan="2"> Nome Esercizio </td> 
      <td> Obiettivo 1: 
      <td> Obiettivo <br> 
       tattico: 
      <td> Durata: </td> 
      </td> 
     </tr> 
     <tr> 
      <td> Obiettivo 2: <br> 
      <td> Obiettivo Coordinato: <br> 
      <td> Tempo Effettivo: </td> 
      </td> 
     </tr> 
     <tr> 
      <td> Numero giocatori:<br> 
       Materiale:<br> 
       Descrizione: <br> 
      </td> 
      <td colspan="3" align="center"> IMMAGINE DA INSERIRE </td> 
     </tr> 
     </tr> 

     </td> 

     <tr> 
      <td colspan="5" align="center"> NOTE </td> 
     </tr> 
    </table> 
</body> 
</html>

來源

2013-06-28 user2051599

請不要把所有的你的代碼創建一個小提琴 –

我不明白請詳細說明 –

你想讓'table'的寬度等於'div'的寬度？ –

現在定義div .ex和tabledisplay inline-block

像這樣

.ex, table{display:inline-block;vertical-align:top;}

Demo

= - ============ 第二方法

現在定義a class並添加你的表比定義CSS display inline-block;

像這樣

<table class="display">

的CSS

.ex, .display{display:inline-block;vertical-align:top;}

來源

2013-06-28 07:15:31

正如我假設你有一個div來包裝你的表，並應用CSS來float:left，你也.ex div申請float:left CSS檢查此琴http://jsfiddle.net/sarfarazdesigner/JVtgT/

CSS代碼

div.ex { 
    height:250px; 
    width:150px; 
    padding:10px; 
    border:1px solid gray; 
    margin:0px; 
    float:left; 
} 
.tablewrap{ 
    float:left; 
}

我也注意到，您表的代碼是不正確的故有此替換它下面的代碼

<table border="1" cellpadding="0" cellspacing="0" width="100%"> 
<tr> 
    <td> Nome Esercizio </td> 
    <td> 
     <table border="1" cellpadding="0" cellspacing="0" width="100%"> 
      <tr> 
       <td>Obiettivo 1:</td> 
       <td>Obiettivo <br> tattico:</td> 
       <td>Durata:</td> 
      </tr> 
      <tr> 
       <td>Obiettivo 2:</td> 
       <td>Obiettivo Coordinato:</td> 
       <td>Tempo Effettivo: </td> 
      </tr> 
     </table> 
    </td> 
</tr> 

<tr> 
    <td> Numero giocatori:<br> 
     Materiale:<br> 
     Descrizione: <br> 
    </td> 
    <td align="center"> IMMAGINE DA INSERIRE </td> 
</tr> 
<tr> 
    <td colspan="2" align="center"> NOTE </td> 
</tr>

更新小提琴

http://jsfiddle.net/sarfarazdesigner/JVtgT/2/

來源

2013-06-28 07:18:53

如果我想在div和table之間有更多的「空間」，我需要做什麼？ CELLPADDING？ – user2051599

在表格css或div css中使用'margin' css –

？ – user2051599

將表格與div對齊

回答

相關問題