使用CSS並排顯示html tr

我正在使用PHP來顯示MySQL數據的表格，它使用PHP非常有效。我的目標是使用我從MySQL獲得的數據將其顯示爲簡單的身份證。

當談到CSS時，我會認爲自己是一個新手，我需要理解爲什麼我的顯示器沒有按照我的意願去。

我做了一些研究，並在網上發現了這個

http://jsfiddle.net/gajjuthechamp/cbEDJ/1/

這是工作，我得到了我想要的，但由於某種原因，第一列萎縮顯示。我試着將行寬改爲50％，不幸的是它正在做同樣的事情。請看下面的圖片和我的代碼。並排

<style>   
    table { 
     width: 100%; 
    } 

    table tr { 
     display: inline 
    } 

    table tr:nth-child(odd) { 
     position: relative; 
    } 

    table tr:nth-child(odd) td { 
     position: absolute; 
     top: 100%; 
     left: 0; 
    } 

    table tr:nth-child(even) { 
     display: block; 
     width: 50%; 
     margin-left: 50%; 
    } 
</style>

CSS顯示錶行側我還試圖從頂部改變值，左，利潤率左，和寬度，但第一靜止收縮。無法換行也會導致這個問題？任何信息或建議非常感謝。

來源

2016-02-26 Emc_tgn15

最好的建議：不要那樣做。一個TR是一個表*行* - 它們並不意味着並排。你最好使用像這樣靈活的容器（不是表格，當然不是相鄰的行），而不是試圖破壞表格應該呈現的方式。 –

我在你的小提琴中沒有看到任何問題。 – ketan

@EdCottrell感謝您花時間回覆。如果我正確地理解了你的意思，那麼你對容器的意思是對每個數據行使用div而不是使用表。 –

@EdCottrell

我終於得到了它的工作，非常感謝大家的建議。我使用div，它會自動按照我的意願工作。

CSS的DIV

<style>  
    body { 
     margin: 0; 
    } 

    div#card:nth-child(odd) { 
     width: 50%; 
     background: lightblue; 
     display: inline-block; 
    } 

    div#card:nth-child(even) { 
     width: 50%; 
     background: orange; 
     display: inline-block; 
     float: left; 
    } 

    .parent { 
     font-size: 0; 
     margin: 0; 
    } 

    .font { 
     font-size: 16px; 
    } 
</style>

HTML的DIV

<div id="card"> 
    <center><b>EMPLOYEE INFORMATION CARD</b></center> 
    <br><b>Name: <?php echo $row ['EMPLOYEE_NAME']; ?></b> 
    <br><b>Address:</b> <?php echo $row ['EMPLOYEE_ADDRESS']; ?> 
    <br><b>Date of Birth:</b> <?php echo $row ['BIRTHDATE']; ?> 
    <br><b>Polling Place:</b> <?php echo $row ['POLLING_PLACE']; ?> 
    <br><b>Precint No:</b> <?php echo $row ['PRECINT_NUMBER']; ?> 
    <br><b>Cluster No:</b> <?php echo $row ['CLUSTER_NUMBER']; ?> 
</div>

來源

2016-02-26 05:03:23

使用CSS並排顯示html tr

回答

相關問題