更改表格单元格中的字体大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Superscript_size_in_table_cell</title>
    <meta name="generator" content="BBEdit 10.5" />
    <style>
    table {
        width: 60%;
    font-size: 0.8em;
    margin-left:auto;
    margin-right:auto;
    border-collapse: collapse;
    }

    .super_script {
    font-size: 80%;
    vertical-align: super;
    }

    </style>
</head>
<body>
    <table id="table_1a-27">
        <caption class="table_caption">Table 1A-27</caption>
        <tr>
            <td>Some text<span class="super_script">Note 1</span></td>
        </tr>
        <tr>
            <td>
                <ol>
                    <li>Beginning of sentence<span class="super_script">Note 2</span> than the rest of the sentence.</li>
                    <li>Some  stuff here</li>
                </ol>
            </td>
        </tr>
   </table>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

我想更改表格单元格的部分内容的文本大小和位置,但上面似乎不适用于表格单元格中的文本.我希望能够调整表格元素的大小,而不仅仅是为了上标目的.

html css html-table superscript text-size

Zep*_*ays

2017 12-21

6
推荐指数

1
解决办法

4万
查看次数

CSS缩放边框图像

我正在寻求一些帮助,创建一个可以根据不同屏幕尺寸/设备进行扩展的边框我已经附上了预期的结果,到目前为止我写的html/css和一个实时页面来预览到目前为止的结果.

问题/疑问:

边框是使用像素设置的,我担心它不会在不同的设备/浏览器上缩放到适当的比例.
角落不太匹配.
是否有更好的方法来实现所需的边框,以便按比例缩放并实现所需的边角格式？也许是矢量图像？

我接近完成一场比赛,但必须有一种(更简单？更好？)的方式来重新创造这种类型的边界.非常感谢您对此的看法以及您的意见.

问候,

和风

编辑/ UPDATE:

我也尝试过使用background-image:和创建六个.png文件,每个角落一个带有纯白色背景,一个用于"边框"的顶部/底部和左/右侧.再次,它很接近,但图像并不总是正确排列.

必须有一种方法可以做到这一点,也许是在一个svg图像中,根据其所在部分的大小来扩展自己,但这超出了我的才能.

谢谢你考虑这个问题!

所需的格式:

在此处查看所需的格式

目前的结果&html/css:

在border-image:这里查看结果

在background-image:这里查看结果

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
    <title>
        EP Layout Test
    </title>
    <style type="text/css">
.ep { 
    background-image: url(ep_border_top_left-w.png), url(ep_border_top_right-w.png),url(ep_border_bottom_right-w.png), url(ep_border_bottom_left-w.png), url(ep_border_vertical.png), url(ep_border_vertical.png), url(ep_border_horizontal.png), url(ep_border_horizontal.png);
    background-position: top left, top right, bottom right, bottom left, left, right, top, bottom;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-y, repeat-y, repeat-x, repeat-x;      
    width: 70%; …

Run Code Online (Sandbox Code Playgroud)

css scaling border css3

Zep*_*ays

2013 02-24

6
推荐指数

1
解决办法

4440
查看次数