Ukuran kolom menggunakan css

Membuat Ukuran kolom sama dan menyembunyikan isi yang melebihi ukuran kolom menggunakan css

<html>
<head>
<title>Auto colom</title>
<style>
.tbl {
   table-layout: fixed;
   border-collapse: collapse;
}
.tbl th {
   padding: 3px 10px;
   text-align: left;
   border-bottom: 1px solid #ccc;
}
.tbl td {
   border-bottom: 1px solid #ccc;
   padding: 3px 10px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
}
</style>
</head>
<body>
<table width="460" class="tbl">
   <tr>
      <th width="30">No</th>
      <th width="130">Judul</th>
      <th>Isi</th>
   </tr>
   <tr>
      <td>1</td>
      <td>Search Engine</td>
      <td>Search engine adalah salah satu situs yang menjadi tujuan
          utama apabila orang ingin mencari informasi di Internet.</td>
   </tr>
   <tr>
      <td>2</td>
      <td>Yahoo Messenger</td>
      <td>Komunikasi seru asik dimana saja kapan saja karna ym bisa di akses juga dari beberapa jenis hanpho modern</td>
   </tr>
</table>
</body>
</html>

Contoh tampilan:
Auto colom

No	Judul	Isi
1	Search Engine	Search engine adalah salah satu situs yang menjadi tujuan utama apabila orang ingin mencari informasi di Internet.
2	Yahoo Messenger	Komunikasi seru asik dimana saja kapan saja karna ym bisa di akses juga dari beberapa jenis hanpho modern

Navigation

blue color

Label

Ukuran kolom menggunakan css

0 komentar:

Arsip Blog

Popular Posts