how to reduce white space(right width) in my box - html

Hello I have two contents in my table, so two boxes that contain contents in html. I want to reduce the distance between these two boxes, but I realized size of one box is too big that they are just white space. I'm having trouble reducing that size. can someone please help me with this?
so, cell x and cell y that's in same row to be located closer.
<table class="table">
<tr id="cell">
---------------------------------------------------------------(one cell)
<td class="vert-align">
<div class="voting-space">
<a href="/post/{{ post.slug }}/vote?is_up=1" class="vote">
<span class="glyphicon glyphicon-triangle-top col-md-12" aria-hidden="true"></span></a>
<br />
<span class="col-md-12" style="height:1px; font-family: 'Passion One', cursive; bottom:10px; padding-left:0.01em;
"><h4 id="vote_count_{{ post.slug }}">{{ post.get_vote_count }}</h4></span> <br>
<a href="/post/{{ post.slug }}/vote?is_up=0" class="vote">
<span class="glyphicon glyphicon-triangle-bottom col-md-12" aria-hidden="true"></span></a>
</div>
</td>
--------------------------------------------------------------------(the other cell)
<td class="vert-align">
{% if post.url %}
<h4 id="line">
<img src="{{post.image}}" height="85" width="85"/><span id="title-font">{{ post.title }}</span>
<span style="margin-left: 15px;" class="domain">({{ post.domain }})</span>
<span class="discuss" style="color:red;">토론장 입장</span>
<br />
<span class="post-info">{{ post.pub_date | timesince }}전/{{ post.moderator.username }}작성/<i class="fa fa-eye"></i>{{post.views}}/{{post.category}}</span>
</h4>
{% else %}
<h4>{{ post.title }}<span style="margin-left: 15px; "class="domain">({{ post.domain }})</span></h4>
{% endif %}

For controlling "cellpadding" in CSS, you can simply use padding on table cells. E.g. for 10px of "cellpadding":
td {
padding: 10px;
}
For "cellspacing", you can apply the border-spacing CSS property to your table. E.g. for 10px of "cellspacing":
table {
border-spacing: 10px;
border-collapse: separate;
}
This property will even allow separate horizontal and vertical spacing, something you couldn't do with old-school "cellspacing".

Related

FontAwesome-like fixed width on Material Design Icons

I'm pretty set on using Material Design Icons for the simple fact that they have a lot more IT oriented icons so it just makes things much easier. I'd like to achieve something similar to FontAwesome's Fixed Width feature, which ensures there's an even space after the icon that remains consistent.
How icons currently look:
How I want the icons spaced:
As far as I can tell so far, however, MDI does not offer this (or I'm missing it), so what are some ways to achieve something similar efficiently without hacking with !important or setting unnecessary margins?
Store-Info CSS:
.heading-block {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 1em;
margin: 5px 0;
}
.heading-content > .store-info p {
font-weight: 600;
font-size: 1em;
line-height: 10px;
margin: 1.7em 0;
}
.heading-content > .store-info {
margin-left: 1.5em;
}
Store Info HTML:
<div class="heading-content">
<div>
<span contenteditable="true" id="store-number" class="store-number">{{ store.store_number }} </span><span class="divider">/</span><span class="store-name">{{store.name}}</span>
</div>
<div class="store-info">
<p id="address_full"><span class="mdi mdi-map-marker"></span>{{ store.street_address }} {{ store.city }}, {{ store.state }} {{ store.postal }}</p>
<p id="address_pull_hidden" style="display:none;">{{ store.street_address }} {{ store.city }} {{ store.state }} {{ store.postal }}</p>
<p>
<span class="mdi mdi-earth"> </span>
{{ store.timezone }}
</p>
<p>
<span class="mdi mdi-phone"></span>
{{ store.phone }}
</p>
{% if not store.mpls_only %}
<p>
<span class="mdi mdi-phone-voip"></span>
{{ store.xo_tn }}
</p>
{% endif %}
{% if store.mpls_only %}
<p>
<span class="mdi mdi-phone-classic"></span>
MPLS Only
</p>
{% endif %}
<p>
<span class="mdi mdi-map-marker"></span>
<span id="local-time">00:00:00 am</span>
<span class="status open">{{ store.status }}</span>
</p>
<p class='store-closed' style="display: none;">
<span class="mdi mdi-map-marker"></span>
Close Reason: <span class="close_reason">{{ store.close_reason }}</span>
</p>
<p class="weather"><span class="mdi mdi-weather-cloudy"><span id="weather-main">Clear</span></p>
<a target='_blank' class="edit" href="/admin/stores/store/{{store.pk}}/change/">Edit information for Store {{store.store_number}}</a>
</div>
</div>
<br>
<div id="map-wrapper">
<div id="map-container" class="container">
<div id="map"></div>
<div id="pano"></div>
</div>
</div>
Thanks in advance, & worth noting I'm not much of a front end guy so if you see something that seems odd, feel free to mention it!
You can create a class to make that happen.
.mat-fw {
text-align: center;
width: 1.25em;
}

Angular HTML equal height

I am trying to set equal height for every single item in the list. Here as you can see in the picture some channels have companion channels(e.g CNN & HLN, BNN & CP24), they are having a different height setting as compared to the channels without any companion channels. How do I make it the same height? The second thing I am trying is to not have any channels get in the line of the alphabets(e.g the Cottage Life channel gets more to the left which gets in the line of the alphabets). Also how do I put a space between rows, I tried putting in which didn't work(e.g after the A head and its channels row i need to put a blank space).
<div class="container col-lg-8" style="float:Left">
<ul class="w3-ul w3-card-4" *ngFor="let head of channelDisplayHeads" style="clear:both">
<h1 align="center" style="background-color:#0083BC;">
<font color="white">{{ head }}</font>
</h1>
<ul *ngFor="let channel of channelList">
<li class="list-group-item logoDisplay" *ngIf="channel.channel.substr(0, 1) === head">
<div *ngIf="channel.compChannel.compChannelLogo.length !== 0; else noCompChannel">
<img class="img-rounded" src="{{ channel.logo }}" alt="{{ channel.channel }}">
<img class="img-rounded" src="{{ channel.compChannel.compChannelLogo }}" alt="{{ channel.channel.compChannelName }}">
</div>
<ng-template #noCompChannel>
<img class="img-rounded" src="{{ channel.logo }}" alt="{{ channel.channel }}">
</ng-template>
<br>
<span class="w3-left">
<mark>
<font size="1">{{ channel.cbsCode }}</font>
</mark>
</span>
<span class="w3-right">
<font size="2">{{ channel.pickCode }}</font>
</span>
</li>
</ul>
</ul>
</div>

how to bring two td cells closer

for my website I'm trying to bring two td closer. They are so far apart, I've been trying to put the td with numbers and td with image together. This is the domain for my webiste:
If you check the code, you can see it's horrible which is probably why I'm having such a hard time trying to bring two td closer.
To be more clear, what I'm trying to do is
<table>
<td class="vert-align" style="padding:0;" >
<div class="votes">
<a href="/post/{{ post.slug }}/vote?is_up=1" class="vote">
<span class="glyphicon glyphicon-triangle-top col-md-12" aria-hidden="true"></span></a>
<br />
<span class="col-md-12" style="height:1px; font-family: 'Passion One', cursive; bottom:10px; padding-left:0.01em;
#and
<td class="vert-align">
{% if post.main_image %}
<h4 id="lineForUrl">
<a href="{{ post.url }}" target="_blank" style="margin-left: 15px; text-decoration:none;"> <img src="{{post.get_image_url}}" class="img-rounded" alt="Cinque Terre" height="75" width="75"/><span id="title-font" title="{{post.title}}">
{{ post.title }}</span><span style="margin-left: 15px;" class="domain">({{ post.domain }})</span></a>
<span class="discuss" style="color:red;">enter</span>
<br />
<span class="post-info">
{% if user.is_authenticated %}
{{ post.moderator.user }}wrote
{% else %}
{{ post.moderator.user }}wrote
{% endif %}
#{{post.category}}</span>
</h4>
"><h4 id="vote_count_{{ post.slug }}">{{ post.get_vote_count }}</h4></span> <br>
<a href="/post/{{ post.slug }}/vote?is_up=0" class="vote">
<span class="glyphicon glyphicon-triangle-bottom col-md-12" aria-hidden="true"></span></a>
</div>
</td>
</table>
#closer
Try this CSS line (if I have correctly understood your problem)
#cell td.vert-align:first-child { width: 40px;}
It will get your td with numbers and td with images closer

How can I decrease the height of cell?

I am trying to decrease the height of the table cells by using the following CSS, but it is not working.
.table tr>td.vert-align{
vertical-align: middle;
height: 5px;
padding: 10px 0 10px 0;
border-bottom: 1px solid #eaebec;
}
This is my HTML code:
<td class="vert-align">
{% if post.url %}
<h4><a href="{{ post.url }}" style="margin-left: 15px;"> <img src="{{post.image}}" height="70" width="70"/>
{{ post.title }}</a><span style="margin-left: 15px;" class="domain">
({{ post.domain }})</span></h4>
{% else %}
<h4>{{ post.title }}<span style="margin-left: 15px; "class="domain">({{ post.domain }})</span></h4>
{% endif %}
<ol class="post-info">
<div class="btn-group btn-breadcrumb">
<span class="btn btn-default">{{ post.moderator.username }</span>
<span class="btn btn-default">{{ post.pub_date | date }}</span>
<span class="btn btn-default">{{post.views}}</span>
discuss
{{post.category}}
</div>
</ol>
</td>
I'm trying to display title/image/domain name in one line that fits nicely to the table, but right now height of the table is too long it just looks odd. I tried height:5px but it won't work
I see no use of a table in your code, but the problem might be caused by you having a ".table" selector instead of a "table" selector.
Dot means classname, no dot means html tag. Please give it a look and if this is not the answer post your whole html code to get a better look at it.
You have already class for your td, so directly use it in your selector.
.vert-align{
vertical-align: middle;
height: 5px;
padding: 10px 0 10px 0;
border-bottom: 1px solid #eaebec;
}
Update:
Decrease the height of your image which is inside the td to decrease the height of cell.

CSS when combining tables, divs and spans

I have a list of items I want to display in a table (because I want to leverage the styling from bootstrap). But because I am having issues making the table sortable I want each row to essentially contain two rows, one information row and one detail row.
The information row will have some status icons and the item name. The detail row will have any quantity of text.
I'm using this answer to create two div/span rows within each table row:
<style>
.table-row {
display: table-row;
}
.data_column {
display: table-cell;
}
.icon_column {
width: 20px;
display: table-cell;
}
</style>
<table class="table table-condensed>
<thead>
<tr class="table_header">
<th>
<div class='table-row'>
<span class="icon_column"><i class="icon-ok"></i></span>
<span class="icon_column"><i class="icon-star icon-large"></i></span>
<span class="icon_column"></span>
<span class="data_column">Name</span>
<span class="data_column">Date</span>
</div>
</th>
</tr>
</thead>
<tbody>
{% for action in actions %}
<tr class="item_row">
<td>
<div class='table-row'>
<span class="icon_column"><input type="checkbox"></span>
<span class="icon_column"><i class="icon-star-empty icon-large"></i></span>
<span class="icon_column"><i class="icon-exclamation-sign icon-green"></i></span>
<span class="data_column">{{ action }}</span>
<span class="data_column">{{ action.previous_reset_date|date:"M d" }}</span>
</div>
<div class='table-row'>
<span>{{ action.notes|apply_markup:"creole" }}</span>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
My issue is that the second "table-row" is displaying like an individual column. It doesn't span the width of the entire table. If this were a strict table, I would need to do something like colspan="5". How do I change the css so that this portion:
<div class='table-row'>
<span>{{ action.notes|apply_markup:"creole" }}</span>
</div>
is the width of the entire table row?
If I remove the class from the second div row, it works fine.
<div>
<span>{{ action.notes|apply_markup:"creole" }}</span>
</div>