Sorunum çözüldü konu kilit

Tabloyu responsive uygun hale getirme

07-01-2021, 11:17:49

#1

Semendary

Sorunum çözüldü konu kilit

07-01-2021, 11:21:10

Şu kodu deneyin:

<div style="overflow-x:auto;">
<span style="font-size: 30px; font-weight: bold;">010203 / Bilgiler</span></div>                                        <div style="line-height:3.5;">                        <table border="1" style="border-collapse:collapse; border-spacing:0px; font-family:open sans,sans-serif; font-size:14px; line-height:normal; width:505px; line-height:2.3; text-align: center;">    <thead>        <tr>            <th scope="row" style="background-color:#1f415f"><span style="color:#FFFFFF"><span style="font-size:13px">010203 </span></span></th>            <th scope="col" style="background-color:#1f415f"><span style="color:#FFFFFF"><span style="font-size:13px; text-align: center">HACİM</span></span></th>            <th scope="col" style="background-color:#1f415f"><span style="color:#FFFFFF"><span style="font-size:13px">AĞIRLIK</span></span></th>            <th scope="col" style="background-color:#1f415f"><span style="color:#FFFFFF"><span style="font-size:13px">AMBALAJ</span></span></th>            <th scope="col" style="background-color:#1f415f"><span style="color:#FFFFFF"><span style="font-size:13px">BASKI</span></span></th>        </tr>    </thead>    <tbody>       <tr>            <th scope="row" style="background-color:#1f415f"><span style="color:#FFFFFF"><span style="font-size:13px">G&Ouml;VDE</span></span></th>            <td style="background-color:rgb(243, 243, 243); text-align:center">550 ml</td>            <td style="background-color:rgb(243, 243, 243); text-align:center">22,10 g</td>            <td style="background-color:rgb(243, 243, 243); text-align:center">1080</td>            <td style="background-color:rgb(243, 243, 243); text-align:center">IML</td>        </tr>        <tr>            <th scope="row" style="background-color:#1f415f"><span style="color:#FFFFFF"><span style="font-size:13px">KAPAK</span></span></th>            <td style="background-color:rgb(243, 243, 243); text-align:center">-</td>            <td style="background-color:rgb(243, 243, 243); text-align:center">5,53 g</td>            <td style="background-color:rgb(243, 243, 243); text-align:center">2160</td>            <td style="background-color:rgb(243, 243, 243); text-align:center">IML</td>       </tr>       <tr>            <th scope="row" style="background-color:#1f415f"><span style="color:#FFFFFF"><span style="font-size:13px">KULP</span></span></th>            <td style="background-color:rgb(243, 243, 243); text-align:center">-</td>            <td style="background-color:rgb(243, 243, 243); text-align:center">1,27 g</td>            <td style="background-color:rgb(243, 243, 243); text-align:center">-</td>            <td style="background-color:rgb(243, 243, 243); text-align:center">-</td>        </tr>    </tbody></table>
</div>

07-01-2021, 11:21:23

canpeksen

Attığım yerleri revize edin hocam,
Tablonun Span etiketlerini bu şekilde değiştirin.

<span style="font-size: 30px;font-weight: bold">010203 / Bilgiler</span>

Head etiketleri arasına da bunu yapıştırın ve deneyin.

<style>table {  border-collapse: collapse;  border-spacing: 0;  width: 100%;  border: 1px solid #ddd;}
th, td {  text-align: left;  padding: 8px;}
tr:nth-child(even){background-color: #f2f2f2}</style>

Kodları çalıştırdıktan sonra ulaştığım sonuç;