Выровняйте таблицу с 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 и таблицей, что мне делать? CELLPADDING? – user2051599

использовать 'margin' css –

в таблице css или div css? – user2051599

Выровняйте таблицу с div

ответ

Смежные вопросы