1. 首頁
  2. 問答
  3. 我在做錯誤的表與divs

我在做錯誤的表與divs

2016-07-27 35 views
0

我做錯了這個表與divs構造？ 爲什麼標題行和單元行不具有相同的寬度？我在做錯誤的表與divs

另一個問題是，當調整瀏覽器窗口標題的大小時，一個單元失去了合理性。我希望頭和單元格具有相同的運動。如果您調整瀏覽器窗口的大小，將會看到不同的邊界。

這裏是我的代碼

html, body { 
 
    width: 100%; 
 
    height: 95vh; 
 
    overflow: hidden; 
 
    background-color: rgba(31, 30, 30, 1); 
 
} 
 
.records { 
 
    width: 99%; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
} 
 
.header-cell { 
 
    display: inline-block; 
 
    width: 9%; 
 
    height: 20px; 
 
    margin-top: 2px; 
 
    margin-left: -4px; 
 
    border: 1px solid #fff; 
 
    background: #3a3a3a; 
 
    color: #fff; 
 
    white-space: nowrap; 
 
} 
 
.cell { 
 
    display: inline-block; 
 
    width: 9%; 
 
    height: 20px; 
 
    margin-top: 2px; 
 
    margin-left: -4px; 
 
    border: 1px solid #fff; 
 
    background: #ccc; 
 
    color: #494949; 
 
    white-space: nowrap; 
 
} 
 
.header { 
 
    position: fixed; 
 
    width: 100%; 
 
} 
 
.row1 { 
 
    padding-top: 4px; 
 
} 
 

 
/* scrollbars */ 
 
::-webkit-scrollbar { 
 
    width: 5px; 
 
} 
 
::-webkit-scrollbar-track { 
 
    -webkit-border-radius: 10px; 
 
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); 
 
    border-radius: 10px; 
 
} 
 
::-webkit-scrollbar-thumb { 
 
    -webkit-border-radius: 10px; 
 
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .5); 
 
    border-radius: 10px; 
 
    background: rgba(204, 51, 0, .9); 
 
} 
 
::-webkit-scrollbar-thumb:window-inactive { 
 
    background: rgba(255, 0, 0, .4); 
 
} 
 
/* scrollbars */ 
 
::-webkit-scrollbar { 
 
    width: 5px; 
 
} 
 
::-webkit-scrollbar-track { 
 
    -webkit-border-radius: 10px; 
 
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); 
 
    border-radius: 10px; 
 
} 
 
::-webkit-scrollbar-thumb { 
 
    -webkit-border-radius: 10px; 
 
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .5); 
 
    border-radius: 10px; 
 
    background: rgba(204, 51, 0, .9); 
 
} 
 
::-webkit-scrollbar-thumb:window-inactive { 
 
    background: rgba(255, 0, 0, .4); 
 
}
<div class="records"> 
 
    <div class="header"> 
 
    <div class="header-cell">#</div> 
 
    <div class="header-cell">Movie</div> 
 
    <div class="header-cell">Distributor</div> 
 
    <div class="header-cell">Country</div> 
 
    <div class="header-cell">Language</div> 
 
    <div class="header-cell">Name</div>  
 
    <div class="header-cell">Role</div> 
 
    <div class="header-cell">Born</div>  
 
    <div class="header-cell">Star Sign</div> 
 
    <div class="header-cell">Episodes</div> 
 
    </div> 
 
    <div style="padding-top:19px;"> 
 
    <div class="cell">145</div> 
 
    <div class="cell">Game Of Thrones</div> 
 
    <div class="cell">HBO</div> 
 
    <div class="cell">USA</div>  
 
    <div class="cell">English</div> 
 
    <div class="cell"> 
 
     <a href="http://www.imdb.com/name/nm0227759/?ref_=tt_cl_t1">Peter Dinklage</a> 
 
    </div> 
 
    <div class="cell">Tyrion Lannister</div> 
 
    <div class="cell">June 11, 1969</div>  
 
    <div class="cell">Gemini</div> 
 
    <div class="cell">2-3-4-6-11</div> 
 
    </div> 
 
    <div style="padding-top:1px;"> 
 
    <div class="cell">146</div> 
 
    <div class="cell">Game Of Thrones</div> 
 
    <div class="cell">HBO</div> 
 
    <div class="cell">USA</div>  
 
    <div class="cell">English</div> 
 
    <div class="cell"> 
 
     <a href="http://www.imdb.com/name/nm3229685/?ref_=tt_cl_t4">Kit Harington</a> 
 
    </div> 
 
    <div class="cell">Jon Snow</div> 
 
    <div class="cell">December 26, 1986</div>  
 
    <div class="cell">Capricorn</div> 
 
    <div class="cell">1-2-3-6-9</div> 
 
    </div> 
 
</div>

來源

2016-07-27 NickD

+0

爲experimend這裏是我的小提琴太https://jsfiddle.net/snart1/5Ldv5m1a/ – NickD

+0

您應該使用

標記爲表。你爲什麼要使用div？ – 3rdthemagical

+1

如果它的表格數據，爲什麼不只是使用表？它會很好地對齊，然後在語義上更有意義。另外它會更好的可訪問性。 – LDJ

回答

0

我已經更新您的HTML和樣式，條目行和浮動的寬度：左;用來代替顯示：inline-block;

HTML

<div class="records" > 
    <div class="header"> 
     <div class="header-cell">#</div> 
     <div class="header-cell">Movie</div> 
     <div class="header-cell">Distributor</div> 
     <div class="header-cell">Country</div> 
     <div class="header-cell">Language</div> 
     <div class="header-cell">Name</div>  
     <div class="header-cell">Role</div> 
     <div class="header-cell">Born</div>  
     <div class="header-cell">Star Sign</div> 
     <div class="header-cell">Episodes</div> 
    </div> 
    <div style="padding-top:19px;width:100%"> 
     <div class="cell">145</div> 
     <div class="cell">Game Of Thrones</div> 
     <div class="cell">HBO</div> 
     <div class="cell">USA</div>  
     <div class="cell">English</div> 
     <div class="cell"><a href="http://www.imdb.com/name/nm0227759/?ref_=tt_cl_t1">Peter Dinklage</a></div> 
     <div class="cell">Tyrion Lannister</div> 
     <div class="cell">June 11, 1969</div>  
     <div class="cell">Gemini</div> 
     <div class="cell">2-3-4-6-11</div> 
    </div> 
    <div style="padding-top:1px;width:100%"> 
     <div class="cell">146</div> 
     <div class="cell">Game Of Thrones</div> 
     <div class="cell">HBO</div> 
     <div class="cell">USA</div>  
     <div class="cell">English</div> 
     <div class="cell"><a href="http://www.imdb.com/name/nm3229685/?ref_=tt_cl_t4">Kit Harington</a></div> 
     <div class="cell">Jon Snow</div> 
     <div class="cell">December 26, 1986</div>  
     <div class="cell">Capricorn</div> 
     <div class="cell">1-2-3-6-9</div> 
    </div> 
</div>

風格

html,body { 
    width:100%; 
    height:95vh; 
    background-color: rgba(31,30,30,1); 
    overflow:hidden; 
} 
.records { 
    width:99%; 
    overflow-x:hidden; 
    overflow-y:auto; 
} 
.header-cell { 
    height: 20px; 
    width: 9%; 
    background: #3a3a3a; 
    color: #ffffff; 
    /* display: inline-block; */ 
    /* margin-left: -4px; */ 
    white-space: nowrap; 
    border: 1px solid #fff; 
    /* margin-top: 2px; */ 
    float: left; 
} 
.cell {  
    height: 20px; 
    width: 9%; 
    background: #cccccc; 
    color: #494949; 
    /* display: inline-block; */ 
    /* margin-left: -4px; */ 
    float: left; 
    white-space: nowrap; 
    border: 1px solid #fff; 
    /* margin-top: 2px; */ 
} 
.header { 
    /*position:fixed; */ 
    width:100%; 
} 
.row1 { 
    padding-top:4px; 
} 

/* scrollbars */ 
::-webkit-scrollbar {width: 5px;} 
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px;}  
::-webkit-scrollbar-thumb {-webkit-border-radius: 10px; border-radius: 10px; background: rgba(204,51,0,0.9); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } 
::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); } 
/* scrollbars */ 
::-webkit-scrollbar {width: 5px;} 
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px;}  
::-webkit-scrollbar-thumb {-webkit-border-radius: 10px; border-radius: 10px; background: rgba(204,51,0,0.9); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } 
::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); }

請參閱更新小提琴： https://jsfiddle.net/5Ldv5m1a/3/

來源

2016-07-27 07:44:28

+0

你好KARTHIK .. 我剛更新您的小提琴（https://jsfiddle.net/snart1/5Ldv5m1a/10 /）的位置固定在標題中 正如你所看到的... 標題只是比數據長一點點..當調整顯示窗口時，它失去了對數據的理由... 這就是我想要達到的 相同的寬度在標題和下面的每一行，固定頭和調整大小頭和數據時不丟失自己辯解 – NickD

+0

您好再次.. KARTHIK 一些實驗後，這就是我想要的.. https://jsfiddle.net/snart1/5Ldv5m1a/13/ 在行上增加了1％（現在爲101％），並且標題與數據具有相同的寬度！ 現在調整大小的作品完美與您的方法！ 做得好的男人！ 謝謝大家，他的建議。 – NickD

0

這是製作表格的高度非常規的方式。 HTML具有<table>元素，其中表格具有<tr>（表格行）元素和<td>（表格單元格）元素。佈局是這樣的：

<table class="tabName"> 
<tr class="header"> 
    <td>Element1</td> 
    <td>Element2</td> 
    <td>Element3</td> 
    <td>Element4</td> 
</tr> 
<tr> 
    <td>Element1</td> 
    <td>Element2</td> 
    <td>Element3</td> 
    <td>Element4</td> 
</tr> 
<tr> 
    <td>Element1</td> 
    <td>Element2</td> 
    <td>Element3</td> 
    <td>Element4</td> 
</tr> 
</table>

這將創建2行，每行中的4個元素不包括報頭。使用第一個表格行的類名稱，可以在標題上設置特殊的CSS規範，併爲非標題設置其他規則。如果您想要的風格，不是標題使用的部分這個CSS規則的細胞

.header td{ 
/*header styles*/ 
}

：如果你想CSS規則，只是頭使用此

td:not(.header td){ 
/*non-header cell styles*/ 
}

以供將來參考，請記住divs只用於在一組共享一組共同的規則時將一組元素「打包」在一起。因此，避免爲多個元素重寫相同的規則，方法是在兩個div中使用相同的類名稱或將它們分組。例如，如果將Ok和Cancel按鈕組合在一起，則可以將它們放入div中，因爲它們將使用除按鈕顏色以外完全相同的CSS規則。

來源

2016-07-27 07:20:01 btrballin

+0

不錯的答案btrballin ..但是如果我想要一些jQuery轉換？ 可以在td上使用它嗎？ – NickD

+0

並觀察固定標題時使用固定位置的標題它混亂一切... – NickD

+0

你可以更具體一點關於什麼JQuery過渡你指的是？你究竟想要完成什麼？ – btrballin

0

試試這個

\t .records { 
 
       display: table; 
 
       overflow-x: hidden; 
 
       overflow-y: auto; 
 
       width: 100%; 
 
} 
 
.btlrow { 
 
    display: table-row; 
 
} 
 
\t 
 
.cell { 
 
    background: #cccccc none repeat scroll 0 0; 
 
    border: 1px solid #fff; 
 
    color: #494949; 
 
    display: table-cell; 
 
    height: 20px; 
 
    margin-top: 2px; 
 
    white-space: nowrap; 
 
} 
 
\t 
 
\t 
 
\t /* scrollbars */ 
 
\t ::-webkit-scrollbar {width: 5px;} \t 
 
\t ::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px;} \t 
 
\t ::-webkit-scrollbar-thumb {-webkit-border-radius: 10px; \t border-radius: 10px; background: rgba(204,51,0,0.9); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } 
 
\t ::-webkit-scrollbar-thumb:window-inactive { \t background: rgba(255,0,0,0.4); } 
 
\t /* scrollbars */ 
 
\t ::-webkit-scrollbar {width: 5px;} \t 
 
\t ::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px;} \t 
 
\t ::-webkit-scrollbar-thumb {-webkit-border-radius: 10px; \t border-radius: 10px; background: rgba(204,51,0,0.9); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } 
 
\t ::-webkit-scrollbar-thumb:window-inactive { \t background: rgba(255,0,0,0.4); }
<div class="records" > 
 
    <div class="btlrow"> 
 
     <div class="cell">#</div> 
 
     <div class="cell">Movie</div> 
 
     <div class="cell">Distributor</div> 
 
     <div class="cell">Country</div> 
 
     <div class="cell">Language</div> 
 
     <div class="cell">Name</div>  
 
     <div class="cell">Role</div> 
 
     <div class="cell">Born</div>  
 
     <div class="cell">Star Sign</div> 
 
     <div class="cell">Episodes</div> 
 
    </div> 
 
    <div class="btlrow"> 
 
     <div class="cell">145</div> 
 
     <div class="cell">Game Of Thrones</div> 
 
     <div class="cell">HBO</div> 
 
     <div class="cell">USA</div>  
 
     <div class="cell">English</div> 
 
     <div class="cell"><a href="http://www.imdb.com/name/nm0227759/?ref_=tt_cl_t1">Peter Dinklage</a></div> 
 
     <div class="cell">Tyrion Lannister</div> 
 
     <div class="cell">June 11, 1969</div>  
 
     <div class="cell">Gemini</div> 
 
     <div class="cell">2-3-4-6-11</div> 
 
    </div> 
 
    <div class="btlrow"> 
 
     <div class="cell">146</div> 
 
     <div class="cell">Game Of Thrones</div> 
 
     <div class="cell">HBO</div> 
 
     <div class="cell">USA</div>  
 
     <div class="cell">English</div> 
 
     <div class="cell"><a href="http://www.imdb.com/name/nm3229685/?ref_=tt_cl_t4">Kit Harington</a></div> 
 
     <div class="cell">Jon Snow</div> 
 
     <div class="cell">December 26, 1986</div>  
 
     <div class="cell">Capricorn</div> 
 
     <div class="cell">1-2-3-6-9</div> 
 
    </div> 
 
</div>

來源

2016-07-27 07:34:16 Friend

+0

尼斯的答案太Anuj但如果使用位置固定在頭惹它的一切.. – NickD

+0

好。 .. 改變了這一行.btlrow {顯示：表列;} 到 .btlheader {顯示：表列;位置：固定;} .btlrow {顯示：表列;} 工作一切良好！ ！ 非常感謝您的回答。 – NickD

+0

乾杯伴侶！ – Friend

0

您的代碼需要在CSS文件和一些變化，HTML幾個CSS變化文件。以下是這些變化。

HTML：

<div class="records" > 
    <div class="header"> 
     <div class="header-cell">#</div> 
     <div class="header-cell">Movie</div> 
     <div class="header-cell">Distributor</div> 
     <div class="header-cell">Country</div> 
     <div class="header-cell">Language</div> 
     <div class="header-cell">Name</div>  
     <div class="header-cell">Role</div> 
     <div class="header-cell">Born</div>  
     <div class="header-cell">Star Sign</div> 
     <div class="header-cell">Episodes</div> 
    </div> 
    <div style="padding-top:19px;display: table-row;"> 
     <div class="cell">145</div> 
     <div class="cell">Game Of Thrones</div> 
     <div class="cell">HBO</div> 
     <div class="cell">USA</div>  
     <div class="cell">English</div> 
     <div class="cell"><a href="http://www.imdb.com/name/nm0227759/?ref_=tt_cl_t1">Peter Dinklage</a></div> 
     <div class="cell">Tyrion Lannister</div> 
     <div class="cell">June 11, 1969</div>  
     <div class="cell">Gemini</div> 
     <div class="cell">2-3-4-6-11</div> 
    </div> 
    <div style="padding-top:1px;display: table-row;"> 
     <div class="cell">146</div> 
     <div class="cell">Game Of Thrones</div> 
     <div class="cell">HBO</div> 
     <div class="cell">USA</div>  
     <div class="cell">English</div> 
     <div class="cell"><a href="http://www.imdb.com/name/nm3229685/?ref_=tt_cl_t4">Kit Harington</a></div> 
     <div class="cell">Jon Snow</div> 
     <div class="cell">December 26, 1986</div>  
     <div class="cell">Capricorn</div> 
     <div class="cell">1-2-3-6-9</div> 
    </div> 
</div>

CSS：

html,body  {width:100%;height:95vh;background-color: rgba(31,30,30,1); overflow:hidden;} 
    .records  {width:99%; overflow-x:hidden; overflow-y:auto; display: table} 
    .header-cell {background:#3a3a3a;color:#ffffff;display:table-cell;border:1px solid #fff;} 
    .cell {background:#cccccc;color:#494949;display:table-cell;border:1px solid #fff;} 
    .header   {display: table-row;} 
    .row1   {padding-top:4px;} 

    /* scrollbars */ 
    ::-webkit-scrollbar {width: 5px;} 
    ::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px;}  
    ::-webkit-scrollbar-thumb {-webkit-border-radius: 10px; border-radius: 10px; background: rgba(204,51,0,0.9); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } 
    ::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); } 
    /* scrollbars */ 
    ::-webkit-scrollbar {width: 5px;} 
    ::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px;}  
    ::-webkit-scrollbar-thumb {-webkit-border-radius: 10px; border-radius: 10px; background: rgba(204,51,0,0.9); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } 
    ::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); }

來源

2016-07-27 07:49:01 Prateek

相關問題

 相關問題