HTML tablosuna Yatay kaydırma çubuğu eklemenin bir yolu var mı? Aslında tablonun nasıl büyüdüğüne bağlı olarak hem dikey hem de yatay olarak kaydırılabilir olması gerekiyor, ancak her iki kaydırma çubuğunun görünmesini sağlayamıyorum.

CSS overflowmülkünü denediniz mi?

overflow: scroll; /* Scrollbar are always visible */
overflow: auto;   /* Scrollbar is displayed as it's needed */

GÜNCELLEME
Diğer kullanıcıların işaret ettiği gibi, kaydırma çubuklarını eklemek için bu yeterli değildir .
Bu nedenle, lütfen aşağıdaki yorumları ve yanıtları görün ve güncelleyin.

İlk display: blockönce masanızı yapın

Daha sonra, set overflow-x:için auto.

table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

Güzel ve temiz. Gereksiz biçimlendirme yok.

İşte tablo başlıkları kaydırma ile daha karmaşık örnekler web sitemde bir sayfadan.

Tabloyu aşağıdaki stille ayarlanmış bir DIV'ye sarın:

div.wrapper {
  width: 500px;
  height: 500px;
  overflow: auto;
}

Bunun için " taşma " CSS özelliğini kullanın .

Kısa özet:

overflow: visible|hidden|scroll|auto|initial|inherit;

Örneğin

table {
    display: block;
    overflow: scroll;
}

@Serge Stroobandt tarafından önerilen çözümle iyi bir başarı elde ettim, ancak @Shevy'in hücrelerle olan sorunuyla karşılaştım, sonra tablonun tam genişliğini doldurmadım. Ben bazı stilleri ekleyerek düzeltmek mümkün tbody.

table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

table tbody {
  display: table;
  width: 100%;
}

Bu benim için Mac'te Firefox, Chrome ve Safari'de çalıştı.

Yukarıdaki çözümlerden hiçbirini çalıştıramadım. Ancak, bir kesmek buldum:

body {
  background-color: #ccc;
}

.container {
  width: 300px;
  background-color: white;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

/* try removing the "hack" below to see how the table overflows the .body */
.hack1 {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.hack2 {
  display: table-cell;
  overflow-x: auto;
  width: 100%;
}

<div class="container">

  <div class="hack1">
    <div class="hack2">

      <table>
        <tr>
          <td>table or other arbitrary content</td>
          <td>that will cause your page to stretch</td>
        </tr>
        <tr>
          <td>uncontrollably</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
        </tr>
      </table>

    </div>
  </div>

</div>

Bu Serge Stroobandt'ın cevabında bir gelişme ve mükemmel çalışıyor. Daha az sütun varsa tablonun tüm sayfa genişliğini doldurmaması sorununu çözer.

<style> 
 .table_wrapper{
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}
</style>

<div class="table_wrapper">
<table>
...
</table>
</div>

Ben de aynı sorunu yaşıyordum. Yalnızca Chrome v31'de test edilen aşağıdaki çözümü keşfettim:

table {
    table-layout: fixed;
}

tbody {
    display: block;
    overflow: scroll;
}

Bu cevabı önceki çözüme dayanarak anladım ve yorum yaptım ve kendi ayarlamamı ekledim. Bu benim için duyarlı tabloda çalışıyor.

table {
  display: inline-block;
  overflow-x: auto;
  white-space: nowrap;
  // make fixed table width effected by overflow-x
  max-width: 100%;
  // hide all borders that make rows not filled with the table width
  border: 0;
}
// add missing borders
table td {
  border: 1px solid;
}

Masadaki '% 100'den fazla genişlik' gerçekten benim için çalışmasını sağladı.

.table-wrap {
    width: 100%;
    overflow: auto;
}

table {
    table-layout: fixed;
    width: 200%;
}

//Representation of table
<div class="search-table-outter">
<table class="table table-responsive search-table inner">
</table>
</div>

//Css to make Horizontal Dropdown

<style>

    .search-table{table-layout: auto; margin:40px auto 0px auto; }
    .search-table, td, th {
        border-collapse: collapse;
    }
th{padding:20px 7px; font-size:15px; color:#444;}
td{padding:5px 10px; height:35px;}
    .search-table-outter { overflow-x: scroll; }
th, td { min-width: 200px; }


</style>