Css bazıları için çok kolay bir soru

aziz1235 1178 gün önce

487 defa görüntülendi

TARİH
2021-01-04
2021-01-02

arkadaşlar benim bi tablom var ve ilk stünu bu şekilde tarih başlığı altında tarihler listeleniyor responsive tablo olduğu için boyut küçüldüğünde tarihler şu şekle dönüyor

TARİH

2021-
01-04

2021-
01-02

ben istiyorumki boyut nolursa olsun tek uzunlukta olsun 2021-01-04 bu şekilde bunu nasıl yapabilirim?

css

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (3)

tayfunerbilen

1178 gün önce

tek yapman gereken bu tarihi <td></td> içinde <div></div> olarak yazdırman ve ona white-space: nowrap özelliği vermen.

yani;

<table>
    ...
    <tr>
        <td>
            <div class="date-format">2021-01-04</div>
        </td>
    </tr>
    ..
</table>
<style>
    .date-format {
        white-space: nowrap;
    }
</style>

böylece alt satıra hiçbir zaman inmez en garanti yol diyebiliriz.

#007173

kargasa1982

1178 gün önce

ilk hücrene o zaman bir class verirsin ve onunda min-width değerini ayarlarsan onun altına düşmez zaten.

.min-w-100{
    min-width:100px;
}

<body>
    <table>
        <tr>
            <td class="min-w-100">2021-01-04</td><td>Başlık</td><td>Açıklama</td>
        </tr>
        <tr>
            <td class="min-w-100">2021-01-02</td><td>Başlık 2</td><td>Açıklama 2</td>
        </tr>
        <tr>
            <td class="min-w-100">2021-01-01</td><td>Başlık 3</td><td>Açıklama 3</td>
        </tr>
    </table>
</body>

#007161

burak001

1178 gün önce

@media only screen and ( max-width:450px ) {

       .divDate{
          font-size:2rem;
       }

}

boyuta göre bu şekilde ayarlayabilirsin

#007158