[RESOLVED]To fix the table width

CSS, HTML, Image, Table, Web Forms, , , ,

Hello. The width of the
table 100%. s
td width and
max-width ‘than I gave.

table { border-collapse:collapse; border-spacing:0; border:0; }
td, th { padding:0; }

.table { max-width:100%; table-layout:fixed; background-color:#fff; border-bottom:1px solid #d8d9db; }

.table thead tr th { overflow:hidden; padding:0 10px; height:38px; text-align:left; background:#fff url('/admintema/images/table_bg.gif'); border:1px solid #d8d9db; }
.table tbody tr td { overflow:hidden; padding:6px 10px; text-align:left; border-left:1px solid #d8d9db; border-right:1px solid #d8d9db; }
                <table cellpadding="0" cellspacing="0" class="table">
                    <thead>
                        <tr>
                            <th style="width:35px; max-width:35px;">No</th>
                            <th style="width:17px; max-width:17px;"><span class="icon-camera icon-large"></span></th>
                            <th style="width:418px; max-width:418px;">Ürün Adı</th>
                            <th style="width:120px; max-width:120px;">Stok Kodu</th>
                            <th style="width:120px; max-width:120px;">Fiyat</th>
                            <th style="width:40px; max-width:40px;">Durum</th>
                            <th style="width:60px; max-width:60px;">İşlem</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
<td style="width:35px; max-width:35px;">86262</td>
                            <td style="width:17px; max-width:17px;"><span id="foto-goster" class="icon-camera icon-large crs_pointer"></span></td>
                            <td style="width:418px; max-width:418px;">Sony Xperia Z Beyaz Mükemme ve Olağan üstü bir telefon herkesin kullanması gerek</td>
                            <td style="width:120px; max-width:120px;">TLSONYZergergergerregregerregergergrgegergeregergerergre</td>
                            <td style="width:120px; max-width:120px;">1.400,00 TL</td>
                            <td style="width:40px; max-width:40px; text-align:center;"><span style="color:#009900;" title="Aktif" class="crs_def tooltip icon-check-sign icon-large"></span></td>
                            <td style="width:60px; max-width:60px; text-align:center;">
                                <a href="#" style="padding:4px; margin:0;" class="btn btn-mavi tooltip" title="Düzelt"><span class="icon-edit icon-large"></span></a>&nbsp;
                                <a href="#" style="padding:4px; margin:0;" class="btn btn-kirmizi tooltip" title="Sil"><span class="icon-trash icon-large"></span></a>
                            </td>
                        </tr>
</tbody>
</table>


IE 8 and this results in other browsers except IE 9
 
 
 

IE 8 and
IE 9 also proplem
 
 

I guess you want to wrap the long text inside the td row . if that the case then apply the below css to your table.

 word-break:break-all;
            word-wrap:break-word;

Complete Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<style>
        table
        {
            border-collapse: collapse;
            border-spacing: 0;
            border: 0;
        }
        td, th
        {
            padding: 0;
        }
        
        .table
        {
            max-width: 100%;
            table-layout: fixed;
            background-color: #fff;
            border-bottom: 1px solid #d8d9db;
        }
        
        .table thead tr th
        {
            overflow: hidden;
            padding: 0 10px;
            height: 38px;
            text-align: left;
            background: #fff url('/admintema/images/table_bg.gif');
            border: 1px solid #d8d9db;
        }
        .table tbody tr td
        {
            overflow: hidden;
            padding: 6px 10px;
            text-align: left;
            border-left: 1px solid #d8d9db;
            border-right: 1px solid #d8d9db;
            word-break:break-all;
            word-wrap:break-word;
        }
    </style>
    
</head>
<body>
 <table cellpadding="0" cellspacing="0" class="table">
        <thead>
            <tr>
                <th style="width: 35px; max-width: 35px;">
                    No
                </th>
                <th style="width: 17px; max-width: 17px;">
                    <span class="icon-camera icon-large"></span>
                </th>
                <th style="width: 418px; max-width: 418px;">
                    Ürün Adı
                </th>
                <th style="width: 120px; max-width: 120px;">
                    Stok Kodu
                </th>
                <th style="width: 120px; max-width: 120px;">
                    Fiyat
                </th>
                <th style="width: 40px; max-width: 40px;">
                    Durum
                </th>
                <th style="width: 60px; max-width: 60px;">
                    İşlem
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="width: 35px; max-width: 35px;">
                    86262
                </td>
                <td style="width: 17px; max-width: 17px;">
                    <span id="foto-goster" class="icon-camera icon-large crs_pointer"></span>
                </td>
                <td style="width: 418px; max-width: 418px;">
                    Sony Xperia Z Beyaz Mükemme ve Olağan üstü bir telefon herkesin kullanması gerek
                </td>
                <td style="width: 120px; max-width: 120px;">
                    TLSONYZergergergerregregerregergergrgegergeregergerergre
                </td>
                <td style="width: 120px; max-width: 120px;">
                    1.400,00 TL
                </td>
                <td style="width: 40px; max-width: 40px; text-align: center;">
                    <span style="color: #009900;" title="Aktif" class="crs_def tooltip icon-check-sign icon-large">
                    </span>
                </td>
                <td style="width: 60px; max-width: 60px; text-align: center;">
                    <a href="#" style="padding: 4px; margin: 0;" class="btn btn-mavi tooltip" title="Düzelt">
                        <span class="icon-edit icon-large"></span></a>&nbsp; <a href="#" style="padding: 4px;
                            margin: 0;" class="btn btn-kirmizi tooltip" title="Sil"><span class="icon-trash icon-large">
                            </span></a>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Thank you very much, your hand health

kortmazsefa

Thank you very much, your hand health

You are welcome and Glad to be of help.

Leave a Reply