Responsive CSS, abbreviated content
To expand on Hubert Grzeskowiak's answer the custom data attribute is a good option for you as you can continue specifying content in the markup as it should.

But there is a way with CSS to display it with the content property. Used on a pseudo element, you can choose to show it or not depending on viewport width with media queries.

This will allow you to :


minimize markup
change the content according to the viewport width
no use of JS
keep the content in the markup


DEMO



th {
    border: 1px solid #000;
    position:relative;
}
td {
    border: 1px solid #000;
}
.full:after{
    content: attr(data-state);
    display:none;
}
@media screen and (max-width:320px) {
    .full:after{
        position:absolute;
        top:0;left:0;
        width:100%; height:100%;
        background:#fff;
        display:block;
}
&lt;table&gt;
    &lt;tr&gt;
        &lt;th class="full" data-state="CA"&gt;California&lt;/th&gt;
        &lt;th class="full" data-state="FL"&gt;Florida&lt;/th&gt;
        &lt;th class="full" data-state="TX"&gt;Texas&lt;/th&gt;
        &lt;th class="full" data-state="GA"&gt;Georgia&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;Sacramento&lt;/td&gt;
        &lt;td&gt;Tallahassee&lt;/td&gt;
        &lt;td&gt;Austin&lt;/td&gt;
        &lt;td&gt;Atlanta&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;