【问题标题】:How to delete space between borders in table and content from right and left如何从左右删除表格中边框和内容之间的空间
【发布时间】:2018-03-08 05:59:35
【问题描述】:

我有一张桌子,我只显示<tr>border-bottom。但我需要这个border 占用的空间不会超过两侧的文本。因此,border-bottom 必须具有相同的宽度,就像文本一样。现在它在侧面需要额外的空间。怎么做?我试图让paddings ="0"; border-spacing="0" 没有帮助。

.program{
    width: 100%;  
    background: #f5f5f5;
    margin-top: 7.8vw;
}
.program .display-flex{
    justify-content: center;
    
}
.program .content-box{
    padding-top: 6.25vw;
}
#title-for-program{
    margin-right: 12vw;  
    padding-top: 7.8vw;
}
table{
    margin-top: -1.8vw;
    font-family: 'afek-regular';
    font-size: 20px; 
    line-height: 18px;
    border-spacing: 0;
    padding: 0;
}

table tr td:nth-child(3){
    font-family: 'almoni-tzar-bold'; 
    font-size: 28px;
    text-align: right;
}
table tr td:nth-child(2){
    font-family: 'almoni-tzar'; 
    font-size: 28px;
    font-weight: 500;
}
table tr:nth-child(1) td:nth-child(2){
    font-family: 'almoni-tzar-bold';
    font-size: 28px;
    text-align: right;
}
table tr{
    border-bottom: 1px solid rgb(175, 173, 173);
    
}
table tr:last-child{
    border-bottom:none;
}
table span{
    font-family: 'almoni-tzar-bold';     
    font-size: 28px;
}
table img{
    width: 50%;
}
table td{
    padding: 2vw;
    text-align: right;
    padding-top: 2.7vw;
    padding-bottom: 2.7vw;
}
.group-28{
    height: 180vh;
    margin-right: 5.7vw;
}
table .enlish-font{
    font-weight: 900;
    font-size: 28px;
    line-height: 34px;
}
table ul{
    direction: rtl;
    list-style-type: square;
}
table ul li{
    line-height: 1.8;
}
<table>
                    <tr>

                        <td colspan="2">
                            <h3>התכנסות - ארוחת בוקר קלה של מאפים וסנדויצ'ים
                            </h3>
                        </td>
                        <td>8:30-9:00</td>

                    </tr>
                    <tr>
                        <td>
                            <ul>
                                <li>שאלון: מדדי חוויית משתמש מובילים</li>
                                <li>אתגרים במדידת חוויית המשתמש</li>
                                <li>שמונה תרופות דמה לקיום עסק בלי לב</li>
                                <li>הערך במדידת חוויית משתמש</li>
                                <li>מדידת חוויית משתמש כמניע לפעולה</li>
                                <li>שאלון: מדדי חוויית משתמש</li>

                            </ul>

                        </td>
                        <td>
                            <span>
                                מבוא
                            </span>
                        </td>
                        <td>
                            9:00- 10:30

                        </td>

                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            הפסקת קפה וכיבוד</td>
                        <td>10:30-11:00</td>

                    </tr>
                    <tr>
                        <td>
                            <ul>
                                <li>מטרות, סימנים, מדדים</li>
                                <li>מדידת אושר ושביעות רצון</li>
                                <li>מדידת ערכים התנהגותיים</li>
                                <li>חשיפת צרכי הלקוח שלא סופקו</li>
                                <li>שאלון: מודל
                                    <span class="enlish-font">HEART
                                    </span>
                                </li>


                            </ul>

                        </td>
                        <td>
                            <span class="enlish-font">HEART</span>
                            <span>מודל

                                <br>
                                <span class="enlish-font"> Google</span>
                                של


                            </span>
                        </td>
                        <td>
                            11:00-12:30

                        </td>

                    </tr>
                    <tr>
                        <td>
                            <img src="./img/hamster.gif">
                        </td>
                        <td>
                            הפסקת צהריים - ארוחה מפנקת במקום</td>
                        <td>12:30-13:30</td>

                    </tr>
                    <tr>
                        <td>
                            <ul>
                                <li>מהם מטרות טובות ורעות לסקרים</li>
                                <li>10 שיטות עבודה מומלצות לסקרים</li>
                                <li>
                                    <span class="enlish-font"> SUS </span>
                                    (סולם שמישות מערכת)</li>
                                <li>
                                    <span class="enlish-font"> NPS
                                    </span>
                                </li>
                                <li> שאלון: סקרי לקוחות</li>
                            </ul>

                        </td>
                        <td>
                            <span>סקרי לקוחות</span>
                        </td>
                        <td>
                            13:30-15:00 &nbsp;

                        </td>

                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            הפסקת קפה וכיבוד</td>
                        <td>
                            15:00-15:30
                        </td>

                    </tr>
                    <tr>
                        <td>
                            <ul>
                                <li>מחקרי שמישות אונליין</li>
                                <li>כיצד לזהות הבדלים משמעותיים בתוצאות</li>
                                <li>הצגה ויזואלית אפקטיבית של נתונים</li>
                                <li> שאלון: טכניקות מדידה</li>
                                <li> שאלות ותשובות וסיום</li>
                            </ul>
                        </td>
                        <td>
                            <span>איך מודדים חוויה</span>
                        </td>
                        <td>
                            15:30-17:00

                        </td>

                    </tr>

                </table>

【问题讨论】:

    标签: html css html-table


    【解决方案1】:

    这里有一个额外的填充

    table td {
        padding: 2vw;
    }
    

    改成这样

    table td {
        padding: 2vw 0;
    }
    

    【讨论】: