I am using Zurb Ink to make html emails. With the panel, it looks correct in the browser with it being 601px wide. But on outlook on Safari OS(Mac book)the panel goes all the way to across the email(like a footer or header).
Should it be like this on outlook in Safari? Or is there something wrong with my code?
<table class="row">
<tr>
<td class="panel" style="background: #ECF8FF; border-color: #b9e5ff">
<table class="twelve columns container">
{% for item in object_list %}
<tr>
<td class="four sub-columns">
{% if not item.user_assigned %}
<table class="tiny-button small radius alert">
<tr>
<td>unssigned</td>
{% else %}
<table class="tiny-button small radius success">
<tr>
<td>assigned</td>
{% endif %}
</tr>
</table>
</td>
<td class="eight sub-columns last">
{{ item.date_due }} - {{ item.action }}
</td>
<td class="expander"></td>
</tr>
{% endfor %}
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Looks like it is because you are missing wrapper and container.
In the docs it mentions the following:
container - Constrains the content to a 580px wrapper on large screens (95% on small screens) and centers it within the body.
wrapper - Wraps each .columns table, in order to create a gutter between columns and force them to expand to full width on small screens.
Related
The thing is I want to add two anchor elements for every table row so I needed to add two more for those links,
and the problem is that when I add them a border appears at the top of thead even when I set
<th style="display:none;"></th>
here's the table code
.tablesgh table{
width: 80%;
margin:auto;
/* align-self: center; */
}
<div class="tablesgh">
<table style="border-collapse: collapse;" class="table text-center table-responsive table-success table-hover table-bordered table-sm">
<thead>
<tr>
<!-- <div class="boldTd"> -->
<th>Nom complet</th>
<th>Num telephone</th>
<th>Lien du profile</th>
<th>Date ajouté</th>
<th style="display:none;"></th>
<th style="display:none;"></th>
<!-- </div> -->
</tr>
</thead>
{% for client in clients %}
<!-- <script>
var cli_name="{{client.name}}";
var cli_id="{{client.id}}";
</script> -->
<tr>
<td>{{client.name}}</td>
<td>{{client.phone}}</td>
<td>{{client.profile_link}}</td>
<td>{{client.date_added}}</td>
<td style="display:none;">{{client.id}}</td>
<td><a style="position:relative;" href="{% url 'delete-record' client.id %}" class="btn btn-outline-danger">Effacer</a></td>
<td>Afficher les commandes</td>
</tr>
{% endfor %}
</table>
<!-- </div>
</div> -->
</div>
Here's a picture of the table
Your table is of class table-bordered, you can try getting rid of that.
You can also control the border appearance directly from the style attribute: for instance, if you replace display:none; with border: 0px;, it should disappear. You can also make it transparent (border-color: transparent;), etc.
I tried some of the answers posted on this forum but cannot find one fitting for me,
I realise this is an age old question sorry.
Im trying to get a vertical line like in this design:
The problem i'm facing is that this is in a table and I cannot figure out how to get them to cros like this.
Its about the element td with 'scores' id
Twig file
{% extends 'base.html.twig' %}
{% block body %}
<div class="table-responsive">
{% for group in duel_groups %}
{% if group is not empty %}
<table class="table table-bordered table-light" style="margin-top: 30px;">
<thead>
<tr>
<th>Omloop</th>
<th>Partuur 1</th>
<th>Scores</th>
<th>Partuur 2</th>
{# <th>Spelers</th>#}
</tr>
</thead>
<tbody class="text-center">
{% for duel in group %}
<tr>
<td>{{ duel.omloopNummer }}</td>
<td id="team1">{{ duel.team1 }}</td>
<td id="scores">
{{ duel.eerstenP1 }} {{ duel.eerstenP2 }}<br>
<hr>
{{ duel.puntenP1 }} {{ duel.puntenP2 }}
</td>
<td id="team2">{{ duel.team2 }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
{% endfor %}
</div>
{% endblock %}
I have tried creating a div of 1px but that didn't work.
I tried a couple of solutions from this question How to make a vertical line in HTML
None seem to fit my use case tho.
Poking around some more came up with this:
<td id="scores" style="background: linear-gradient(#bcbcbd, #bcbcbd) no-repeat center/3px 85%;">
{{ duel.eerstenP1 }} {{ duel.eerstenP2 }}<br>
<hr style="border-top: 3px solid #000000; background: transparent;">
{{ duel.puntenP1 }} {{ duel.puntenP2 }}
</td>
Where I am adding a vertical line to the middle of the column and styling the hr tag
I want to split web page onto two parts. Static (top one) and scroll-able (bottom one).
The problem is that solution I have creates a scroll-able box with fixed width and height. But I've seen an example of a page where bottom and right sections are limited by size of the browser screen and have scroll bars always visible. With fixed size box this will not work if screen is small. The scroll bars will be hidden.
So far I tried only HTML and CSS approach. I use Flask and Python 3 as an engine.
Here is what I already created. First is base.html and second is data_entry.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="static/css/style.css">
Home
<a> </a>
Data entry
<a> </a>
Help
</head>
<body class="stop-scrolling">
{% block content %}{% endblock %}
</body>
</html>
{% extends 'base.html' %}
{% block content %}
<h2><br>{{title}}</h2>
<br>
<h3>Searchable fields</h3>
<div style="float:top; width:2000px">
<form action="/data_entry" method="POST">
<table>
<tbody>
<tr>
...
</tr>
</tbody>
</table>
<input type="submit" class="button" value="Search">
</form>
</div>
<div style="float:bottom; width:2000px; height:400px; overflow:auto;">
<table class="tableborder">
<thead>
<tr class="tableheaderborder">
{% for h in selected_header %}
<td class="tableheaderborder"> {{ h }} </td>
{% endfor %}
</tr>
</thead>
<tbody class="tableborder">
{% for row in selected_entries %}
<tr class="tableborder">
{% for column in row %}
<td class="tableborder"> {{ column }} </td>
{% endfor %}
</tr>
{% endfor%}
</tbody>
</table>
</div>
{% endblock %}
You can use this on your lower div. It will always show scroll bar to your div
overflow-y:scroll !important;
For a website I'm using Bootstrap Material Design and having a hard time aligning elements in a row (course.name and the course.update, course.delete buttons).
I want them to align vertically with CSS but vertical-align:middle doesn't work. Neither does <tr valign="middle">.
Any help is appreciated.
{% if course_list %}
<table class="table table-hover">
<tr>
<th>Course Name</th>
</tr>
{% for course in course_list %}
<tr>
<td><a class="text-nowrap" href="{% url "courses.detail" course.id %}">{{ course.name }}</a>
{% if course.instructor == user %}
<div class="pull-right">
{% url 'courses.update' pk=course.id as url %}
{% bootstrap_button button_type='link' content='Edit' button_class='btn-warning' href=url %}
{% url 'courses.delete' pk=course.id as url %}
{% bootstrap_button button_type='link' content='Delete' button_class='btn-danger' href=url %}
</div>
{% endif %}
</td>
</tr>
{% endfor %}
</table>
first of all your table is not responsive, to make it responsive do structure like this
<div class="table-responsive">
<table class="table table-bordered table-striped">
//rest of your code
</table>
</div>
it will make your table responsive and
.table td {
text-align: center;
}
or
<td class="text-center">some text</td>
make it center aligned
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>