テーブルのtdの位置を変更

Question

私の学校のウェブサイトを作っています。私はテーブルに詰まっています：/。私はスケジュールを作成しており、金曜日と日曜日のボタンを追加したいと思っています。これは私のコードであり、私はこのようにそれを行うことができます。このような今、そのhttp://prntscr.com/b2s8oa

：http://prntscr.com/b2s8wx

コード：

<div class="rasporedden"> 
    <table> 
    <tr> 
     <td> 
     <img src="sliki/levostrelka.png" class="rasporedstrelka"> 
     </td> 
     <td> 
     Понеделник 
     </td> 

     <td> 
     Вторник 
     </td> 
     <td> 
     <img src="sliki/desnostrelka.png" class="rasporedstrelka"> 
     </td> 
    </tr> 
    </table> 
</div> 

Answer 1

、最初と最後のセルに彼らが:first-childと:last-childpseudo-classesを用いて含む画像の幅に等しい幅を与えます。そうすることで残りのセルに残りのスペースを動的に充填させる必要があります。ここで

は簡単な例です：

*{box-sizing:border-box;font-family:sans-serif;} 
 
table{ 
 
    border:1px solid #000; 
 
    width:100% 
 
} 
 
td:first-child,td:last-child{ 
 
    background:#ddd; 
 
    text-align:center; 
 
    width:20px; 
 
}

<table> 
 
    <tr> 
 
    <td>«</td> 
 
    <td>Lorem ipsum</td> 
 
    <td>dolor sit amet</td> 
 
    <td>»</td> 
 
    </tr> 
 
</table>

は、表は、あなたが提示されているデータの意味的な理にかなっていない限り、しかし、それはコンテンツをレイアウトするための最良の選択肢ではない、と述べました。

Answer 2

これは正しい方向にあなたをオフに設定する必要があります。 CSSを使用し

.rasporedden table { 
 
    width: 100%; 
 
    text-align: center; 
 
    table-layout: fixed; 
 
} 
 
.left-align { 
 
    text-align: left; 
 
} 
 
.right-align { 
 
    text-align: right; 
 
}

<div class="rasporedden"> 
 
    <table> 
 
    <tr> 
 
     <td class="left-align"> 
 
     <img src="sliki/levostrelka.png" class="rasporedstrelka"> 
 
     left 
 
     </td> 
 
     <td> 
 
     Понеделник 
 
     </td> 
 

 
     <td> 
 
     Вторник 
 
     </td> 
 
     <td class="right-align"> 
 
     right 
 
     <img src="sliki/desnostrelka.png" class="rasporedstrelka"> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>